Home  >  Angular  >  Angular Material

Angular Material Checkbox Checked

By Arvind Rai, March 27, 2021
Angular Material can be checked dynamically using checked property of <mat-checkbox> element. Checkbox can also be checked using Angular ngModel. The ngModel can be used for two-way binding. Angular Material <mat-checkbox> has change event that is emitted when checkbox is checked and unchecked.


Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

checked

Angular Material <mat-checkbox> has a property checked that is used to check and uncheck the checkbox dynamically. At runtime we can check and uncheck checkbox by passing true and false value to checked property using property binding.
Find the sample code.
HTML code:
<mat-checkbox [checked]="isXyzChecked"> XYZ </mat-checkbox> 
Component code:
isXyzChecked = true; 

ngModel

The ngModel can be used to check and uncheck checkbox dynamically. The ngModel can be used for two-way binding.
Find the sample code.
HTML code:
<mat-checkbox [(ngModel)]="isAbcChecked"> ABC </mat-checkbox> 
Component code:
isAbcChecked = true; 

change Event

The change event is emitted when checked value of checkbox changes.
Find the sample code.
HTML code:
<mat-checkbox (change)="onChange($event)"> PQR </mat-checkbox> 
Component code:
onChange(ob: MatCheckboxChange) {
  console.log("PQR checked: " + ob.checked);
} 

Complete Example

app.component.html
<h3>checked</h3>
<mat-checkbox [checked]="isXyzChecked"> XYZ </mat-checkbox>
<br/><button mat-button-raised (click)="toggleChk()">On/Off</button>

<h3>ngModel</h3>
<mat-checkbox [(ngModel)]="isAbcChecked"> ABC </mat-checkbox>
<br/>{{isAbcChecked}}

<h3>change Event</h3>
<mat-checkbox (change)="onChange($event)"> PQR </mat-checkbox> 
app.component.ts
import {Component} from '@angular/core';
import { MatCheckboxChange } from '@angular/material/checkbox';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  isXyzChecked = false;
  isAbcChecked = true;
  
  toggleChk() {
    this.isXyzChecked = (this.isXyzChecked)? false : true;
  }  
  onChange(ob: MatCheckboxChange) {
    console.log("PQR checked: " + ob.checked);
  }
} 
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatCheckboxModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
Angular Material Checkbox Checked

Reference

Angular Material checkbox

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI








©2021 concretepage.com | Privacy Policy | Contact Us