Angular Material Dynamic Checkbox List Example

By Hardik Savani | March 19, 2021 | Category : Angular


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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: