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.
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";
See the list of the supported configuration options that will help you configure the component.
Need more functionality? Take a survey and help us develop CKBox to suit your needs better!