Angular Material Checkbox Example

Angular Material Checkbox Example

Angular12 24-07-2021 Saheb Sutradhar

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>

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;
}
 
Below properties you can use to configure the tooltip
 
  • 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

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...