# Eject a component

> Copy one component's source into your app and own it. The rest stays on npm.

Source: https://ngwr.dev/guides/eject  
Kind: Guide  
Added in v16.4

## When to eject

When a token, a hook or a template slot cannot get you there. Try those first: a copy stops getting updates.

Eject one component, not the library. A changed template, a different DOM structure or behaviour the inputs do not cover are good reasons. A colour or a size is not: see [Theming](https://ngwr.dev/guides/theming).

## The command

It reads the installed version and copies the sources of that release.

```bash
ng g ngwr:eject button
```

| Option | What it does |
| --- | --- |
| `<entry>` | The path under ngwr/: button, select, charts/bar-chart. A bare bar-chart works too |
| `--path` | Where the copy goes. Default: src/app/ngwr/\<entry> |
| `--from` | A local checkout of the ngwr repository to copy from, for work offline |
| `--dry-run` | Lists the files and writes nothing |

```bash
ng g ngwr:eject charts/bar-chart --path src/app/ui/bar-chart
ng g ngwr:eject button --dry-run
ng g ngwr:eject button --from ../ngwr
```

The npm package ships compiled code, so the sources come from GitHub, at the tag of your version. Offline, pass `--from` with a local checkout.

Then import the copy, and load its stylesheet instead of the package's.

```typescript
// before
import { WrButton } from 'ngwr/button';

// after
import { WrButton } from './ngwr/button';
```

```scss
// styles.scss
@use 'ngwr/theme';
@use './app/ngwr/button/styles';
```

## What changes

| What | After eject |
| --- | --- |
| The component | Yours. Edit the template, the styles and the class freely |
| ng update | Skips the copy: no fixes, no migrations, no new inputs |
| Everything else | Still the package: the copy imports ngwr/utils, ngwr/icon, ngwr/theme |
| Selector and classes | The same names as the package |

Never import the copy and the package's component into the same template: both match the same selector. To use both, rename the selector and the `.wr-*` classes in the copy.

A few components read private files of ngwr that no package path exposes. The command copies those too, into `_ngwr-internal` beside the ejected folder. Components ejected side by side share it, and a file already there is left as it is.

## Going back

Delete the folder and import from the package again.

```bash
rm -r src/app/ngwr/button
```

Point the imports back at `ngwr/button` and restore `@use 'ngwr/button';` in the stylesheet. Updates reach the component again. Once no ejected component is left, delete `_ngwr-internal` too.

## See also

- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.
- [Installation](https://ngwr.dev/docs/installation) — Add ngwr to an Angular app.
- [Migration](https://ngwr.dev/docs/migration) — Upgrade ngwr from any earlier major.