# Angular

If you would like to use CKBox in an Angular application, start by installing the `ckbox` package as described int [this guide](../../installation.md#npm). Then, within Angular component, access the reference to a `<div />` element and use it to instantiate CKBox in the `ngAfterViewInit` lifecycle method.

> **Note**
>
> Please refer to our repo with examples for full [code sample](https://github.com/ckbox-io/ckbox-examples/tree/main/angular).

Shown below is the content of an example Angular component file:

```ts
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import * as CKBox from "ckbox";

@Component({
	selector: "ckbox-sample",
	templateUrl: "./ckbox-sample.component.html",
	styleUrls: ["./ckbox-sample.component.css"],
})
export class CKBoxSampleComponent implements AfterViewInit {
	@ViewChild("ckbox") ckboxRoot?: ElementRef;

	ngAfterViewInit(): void {
		CKBox.mount(this.ckboxRoot?.nativeElement, {
			tokenUrl: "https://your.token.url",
		});
	}
}
```

Place the following snippet inside the component’s template file:

```html
<div #ckbox></div>
```

Finally, add styling to the root `styles.css` file:

```css
@import "../node_modules/ckbox/dist/styles/ckbox.css";
```

> **Note**
>
> See the list of the supported [configuration options](../../configuration/configuration-options.md) that will help you configure the component.

> **Note**
>
> Need more functionality? [Take a survey](https://surveys.hotjar.com/1d72aefc-0073-416d-9e70-b773458881b4) and help us develop CKBox to suit your needs better!

---

Full index of the CKBox documentation: [llms.txt](../../../../llms.txt)