# Angular

> A provider at bootstrap, or a function in a component.

Source: https://docs.usejot.co/docs/install/angular

<Callout title="Packages are on their way to npm">
  Until `@usejot/angular` is published, the [script tag](/docs/install/script) in `index.html` does
  the same job today.
</Callout>

```bash
npm install @usejot/angular
```

```ts title="src/main.ts"
import { provideJot } from "@usejot/angular";

bootstrapApplication(AppComponent, {
  providers: [provideJot({ projectKey: "jot_pk_your_key" })],
});
```

## From a component

`jotInit(config)` mounts the widget and returns a cleanup function. Call it in
`ngOnInit`, clean up in `ngOnDestroy`:

```ts
import { jotInit } from "@usejot/angular";

export class AppComponent implements OnInit, OnDestroy {
  private cleanup = () => {};

  ngOnInit() {
    this.cleanup = jotInit({ projectKey: "jot_pk_your_key" });
  }

  ngOnDestroy() {
    this.cleanup();
  }
}
```

Every [script option](/docs/install/script#options) is a config key: `trigger`,
`edge`, `offset`, `environment`, `autostart`.