To get checked checkbox value in angular material; In this tutorial, i am going to show you on how to get checked checkbox values in the angular 12 app with events.
The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.
How to Get Checked Checkbox Value in Angular 12 Material
- Step 1 – Create New Angular App
- Step 2 – Add Code 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 terminal to install angular app:
ng new my-new-app
Step 2 – Add Code on Module.ts File
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, 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 for get selected checkbox values. So, visit src/app/app.component.html and update the following code into it:
<div class="container"> <h1>angular 12 checkbox checked event - laratutorials.com</h1> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <label for="website">Website:</label> <div *ngFor="let web of websiteList"> <label> <input type="checkbox" [value]="web.id" (change)="onCheckboxChange($event)" /> {{web.name}} </label> </div> </div> <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button> </form> </div>
Step 4 – Add Code On Component ts File
Go to the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators, FormArray} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form: FormGroup; websiteList: any = [ { id: 1, name: 'Google.com' }, { id: 2, name: 'Angular.com' }, { id: 3, name: 'laratutorials.com' } ]; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ website: this.formBuilder.array([], [Validators.required]) }) } onCheckboxChange(e) { const website: FormArray = this.form.get('website') as FormArray; if (e.target.checked) { website.push(new FormControl(e.target.value)); } else { const index = website.controls.findIndex(x => x.value === e.target.value); website.removeAt(index); } } submit(){ console.log(this.form.value); } }
Step 5 – Start Angular App
Execute the following commands on terminal to start angular app:
ng serve
Be First to Comment