Angular material checkbox is a built-in material component that provides the same functionality as a native <input type= “checkbox”> enhanced with Material Design styling and animations.
To use the material checkbox in the Angular application, you need to import MatCheckboxModule from @angular/material/checkbox.
Here is the step-by-step guide:
Step 1: Setup an Angular project
Create a new Angular project using Angular CLI using the below command:
ng new checkbox-app
Go to the project directory:
cd checkbox-app
Step 2: Install Angular Material
Please run the following NPM command to install Angular Material and its dependencies.
ng add @angular/material
Step 3: Create a Standalone Checkbox-list Component
You can create a standalone component for the checkbox using the below command:
ng g c checkbox-list --standalone
Step 4: Implement the Checkbox-list Component
To work with multiple checkboxes, we need to define an array of objects, each representing the label and checked property, which can be true or false.
Then, we will define two functions:
- onCheckboxChange()
- getSelectedCheckboxes()
The onCheckboxChange() function accepts an index and even as an argument.
- The index is of the checkbox in the checkboxes array.
- The event is an event object from the change event of the checkbox.
The main purpose of the onCheckboxChange() method is to update the checked property of the checkbox at the given index based on the value of the event.checked.
The main purpose of the getSelectedCheckboxes() function is to return an array of labels for the checked checkboxes. We will display the selected values in an unordered list.
Add the following code inside the src/app/checkbox-list/checkbox-list.component.ts file:
import { Component } from '@angular/core'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-checkbox-list', standalone: true, imports: [CommonModule, MatCheckboxModule], templateUrl: './checkbox-list.component.html', styleUrl: './checkbox-list.component.css', }) export class CheckboxListComponent { checkboxes = [ { label: 'Option 1', checked: false }, { label: 'Option 2', checked: false }, { label: 'Option 3', checked: false }, { label: 'Option 4', checked: false }, ]; onCheckboxChange(index: number, event: any) { this.checkboxes[index].checked = event.checked; } getSelectedCheckboxes() { return this.checkboxes .filter((checkbox) => checkbox.checked) .map((checkbox) => checkbox.label); } }
Step 5: Add an HTML to display checkbox values
Write the following code inside the src/app/checkbox-list/checkbox-list.component.html file:
<div *ngFor="let checkbox of checkboxes; let i = index"> <mat-checkbox [checked]="checkbox.checked" (change)="onCheckboxChange(i, $event)" > {{ checkbox.label }} </mat-checkbox> </div> <h3>Selected Values:</h3> <ul> <li *ngFor="let selected of getSelectedCheckboxes()">{{ selected }}</li> </ul>
In this code, we display multiple checkboxes, and the user can select multiple values from them.
Then, we display those selected values using the *ngFor directive.
Step 6: Import the checkbox-list component
Our application’s main component is the src/app/app.component.ts file, and we need to import the checkbox-list.component.ts file into the app.component.ts file to register the component.
Add the following code inside the src/app/app.component.ts file:
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CommonModule } from '@angular/common'; import { CheckboxListComponent } from './checkbox-list/checkbox-list.component'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, CommonModule, CheckboxListComponent], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { title = 'checkbox-demo'; }
And now, you can use the <app-checkbox-list> element inside the src/app/app.component.html file:
<!-- app.component.html --> <app-checkbox-list></app-checkbox-list>
Save the file and start the Angular Development server using the below command:
ng serve --open
If you select multiple checkboxes, you will see the values displayed underneath like this:
That’s all!
Dronax
I’m working with angular 9, instead of doing:
if (isChecked),
you have to put
if (isChecked[‘checked’])