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 

npm install -g @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

ng new angular-tiiltip

STEP 3 - Install the Angular Material Package

Install the Angular Material package by running below command

ng add @angular/material

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>

<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;
}

 <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;
}