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.

Note

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";

@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";

Note

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

Note

Need more functionality? Take a survey and help us develop CKBox to suit your needs better!