Angular 12 Dynamic Checkbox List With Reactive Form

Angular 12 dynamic checkbox list example; Through this tutorial, i will show you how to show a dynamic checkboxes list using Material in angular 12. Basically items will dynamically list and user can choose using checkbox.

As well as, you will learn how to create dynamic checkboxes with reactive forms in angular app. And can easily add dynamic checkbox in angular 7, angular 8, angular 9, angular 10, angular 11 and angular 12 version.

Dynamically Checkbox List With Reactive Form In Angular 12

• Step 1 – Create New Angular App
• Step 2 – Import Moudules on Module.ts File
• Step 3 – Add Code on View File
• Step 4 – Add Code On Component ts File
• Step 5 – Start Angular App

Step 1 – Create New Angular App

Execute the following command on it terminal to install angular app:

ng new my-new-app

Step 2 – Import Moudules on Module.ts File

Import modules; so go to src/app directory and open app.module.ts file. Then add the following code into it:

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

Step 3 – Add Code on View File

Create simple reactive form to display dynamically checkbox list. So, visit src/app/app.component.html and update the following code into it:

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

Step 4 – Add Code On Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } 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 {
  name = 'Angular';
   
  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 – Start Angular App

Eecute the following commands on terminal to start angular app:

ng serve

Recommended Angular Tutorials