Angular Material Dynamic Checkbox List Example

Hi,

I am going to show you example of angular material dynamic checkbox. This article goes in detailed on material ui dynamic checkbox in angular. I’m going to show you about angular material ui multiple checkbox. this example will help you angular material design checkbox group.

sometimes we have an array of list of items like programming technology for example PHP, .net, angular, laravel, etc. and you have to choose multiple items from them. then you will use a checkbox. basically, these items will dynamically list and users can choose using the checkbox. here I will give you a very simple example of dynamic checkboxes with reactive forms in the angular 11 apps.

you can easily add a dynamic checkbox with material design in angular 7, angular 8, angular 9, angular 10, and angular 11 versions.

Let's see preview and steps:

Preview:

Step 1: Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new my-app

Step 2: Add Material UI

install material ui by using following command:

ng add @angular/material

Step 3: Import Form Module

in this step, we need to import form and reactive form module as like bellow:

app/app.module.ts

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

Step 4: Update Ts File

app/app.component.ts

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormArray,
  FormControl,
  ValidatorFn
} from '@angular/forms';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent {
  
  form: FormGroup;
  webData = [
    { id: 1, name: 'PHP' },
    { id: 2, name: 'Laravel' },
    { id: 3, name: 'Angular' },
    { id: 4, name: 'React' }
  ];
  
  get ordersFormArray() {
    return this.form.controls.orders as FormArray;
  }
  
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: new FormArray([])
    });
  
    this.addCheckboxesToForm();
  }
  
  private addCheckboxesToForm() {
    this.webData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
  }
  
  submit() {
    const selectedOrderIds = this.form.value.orders
      .map((checked, i) => checked ? this.webData[i].id : null)
      .filter(v => v !== null);
    console.log(selectedOrderIds);
  }
}

Step 5: Update HTML File

app/app.component.html

<h1>Angular Material Dynamic Checkbox Example - ItSolutionStuff.com</h1>
   
<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of ordersFormArray.controls; let i = index">
    <mat-checkbox [formControlName]="i">  
      {{webData[i].name}}
    </mat-checkbox>
    <br/>
  </label>
  
  <br/>
  <button class="btn btn-success">submit</button>
</form>

now you can check.

i hope it can help you...