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

Please refer to our repo with examples for full code sample.

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

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

    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:

<div #ckbox></div>

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

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

See the list of the supported configuration options that will help you configure the component.