Angular Checkbox is an extension to standard checkbox element with theming.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {CheckboxModule} from 'primeng/checkbox';
Getting Started
Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.
Multiple Values
Multiple mode is enabled by default, ngModel property refers to an array to bind the selected values.
<p-checkbox name="groupname" value="val1" [(ngModel)]="selectedValues"></p-checkbox>
<p-checkbox name="groupname" value="val2" [(ngModel)]="selectedValues"></p-checkbox>
export class ModelComponent {
selectedValues: string[] = [];
}
As ngModel is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.
export class ModelComponent {
selectedValues: string[] = ['val1','val2'];
}
Label
The label attribute provides a label text for the checkbox. This label is also clickable and toggles the checked state.
<p-checkbox name="groupname" value="val1" label="Value 1" [(ngModel)]="selectedValues"></p-checkbox>
<p-checkbox name="groupname" value="val2" label="Value 2" [(ngModel)]="selectedValues"></p-checkbox>
Boolean Value
A single boolean value can be bound using the ngModel property as well by enabling the binary option.
export class ModelComponent {
value: boolean;
}
<p-checkbox [(ngModel)]="value" [binary]="true"></p-checkbox>
Model Driven Forms
Checkbox can be used in a model driven form as well. In this case, due to an issue in Angular bind the formControl instance instead of using formControlName.
<!-- Wrong -->
<p-checkbox formControlName="cities"></p-checkbox>
<!-- Correct -->
<p-checkbox [formControl]="myFormGroup.controls['cities']"></p-checkbox>
Theming
Checkbox supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Checkbox showcase for demos and documentation.