Angular Material 13 Dynamic Checkbox Tutorial Example

In this Angular tutorial, i will walk you through creating a dynamic checkboxes list using Angular Material.

Checkboxes are also known as toggles; from the user experience perspective, they are used for making a selection by users. Checkboxes are profoundly used for making a selection out of an option list.

Every checkbox works independently in a checkbox list. A user can check for selection and uncheck for unselecting the option value.

The angular material library offers an easy solution for creating checkboxes. The mat-checkbox is a profound directive which amplifies the UI control.

<mat-checkbox> supports profoundly @angular/forms and works notably with both FormsModule and ReactiveFormsModule.

Also mat-checkbox supports an indeterminate state, same as native . Additionally, the checkbox’s indeterminate property is set to true by default. Any interaction with the checkbox by a user will lift the indeterminate state.

Install Angular Application

Angular CLI is a tool that lets you build angular projects. By using the below command, you can install angular CLI in a couple of seconds:

npm install -g @angular/cli

Afterward, you can verify the angular CLI version:

ng version

For creating a dynamic list of checkboxes in Angular, you need to have an angular project installed on your system.

ng new angular-material-checkbox-example

Get into the project root:

cd angular-material-checkbox-example

Setting Up Angular Material

Head over to the terminal or command prompt and execute the command to install the Angular material library.

ng add @angular/material

Select Angular Material Pre-built theme, Typography and Animations:

# ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

Setting Up MatCheckboxModule, FormsModule in AppModule

In order to create the dynamic list of checkboxes, we need to import and register the MatCheckboxModule and FormsModule API in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angular Dynamic List Example

We need to define the Movies array with some values that we will display to the users. Also, crate a Movie Interface thats a schema for Checkboxes values.

Following code directly goes to app.component.ts file.

import { Component } from '@angular/core';
interface Movie {
  name: string;
  selected: boolean;
  disabled: boolean;
  movieCollection?: Movie[];
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 
  constructor() { }
  movies: Movie = {
    name: 'Dynamic Movie List',
    selected: false,
    disabled: false,
    movieCollection: [
      { name: 'Black Panther', selected: false, disabled: false },
      { name: 'Avengers: Endgame', selected: false, disabled: false },
      { name: 'Mission: Impossible - Fallout', selected: false, disabled: false },
      { name: 'Spider-Man: Into the Spider-Verse', selected: false, disabled: false },
      { name: 'Mad Max: Fury Road', selected: false, disabled: false },
      { name: 'Wonder Woman', selected: false, disabled: false }
    ]
};
}

To iterate the movie collection, use the *ngFor directive that will fetch the movie’s name dynamically within the angular material checkbox.

<div *ngFor="let data of movies.movieCollection">
  <mat-checkbox>
    {{data.name}}
  </mat-checkbox>
</div>

Run the application using the below command:

ng serve --open

Here is the checkboxes dynamic list displayed on the browser.

Summary

Ultimately, we have finished this Angular Material Checkboxes tutorial. We have seen profound methods such as an Indeterminate state to handle checkboxes dynamically in Angular using mat-checkbox directive.