In this post we will learn how to use angular material checkbox.
There are few steps we need to follow to implement angular material checkbox in your angular application.
STEP 1 - install @angular/cli in your system
If @angular/cli is not installed in your system then first install angular/cli .Open the command prompt or terminal and run the below command to install @angular/cli
STEP 2 - Create new angular project
Open the command prompt or terminal and run the below command , this command will create new angular project
STEP 3 - Install the Angular Material Package
Install the Angular Material package by running below command
Import MatCheckboxModule form @angular/material/checkbox.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material/checkbox';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
MatCheckboxModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
STEP 4 - Add the tooltip code in the view template
In this step we will add html code for checkbox in the view template
<mat-checkbox>Checkbox Example</mat-checkbox>
We can use two way data binding in the check box .
Using two way data binding we can pass data from checkbox view to the component class and form the component class to checkbox view.
<mat-checkbox [(ngModel)]="checkBoxData">Checkbox Example</mat-checkbox>
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
public checkBoxData=true;
}
- labelPosition : 'after' | 'before' using label position we can change the label position of the checkbox
- disabled : true | false using disabled property we van enable or disabled the checkbox.
If you want to configure the checkbox dynamically you you can use property binding.
<mat-checkbox
[disabled]="isCheckboxDisabled"
[(ngModel)]="checkBoxData">
Checkbox Example
</mat-checkbox>
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
public checkBoxData=true;
public isCheckboxDisabled=false;
}
I hope this article is helpful for you , i am very glad to help you thanks for reading