Angular

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.

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

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:

<div #ckbox></div>

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

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