mat checkbox – Checkbox Implementation In Angular Using Mat-Checkbox(Material Component) you can Learn how to build checkboxes using material design.

mat checkbox

The mat-checkbox is the selector of MatCheckbox directive which is used to create Material design checkbox. you can simply step by step Create New App and Add Material Design.

Create New App

ng new app-material

Add Material Design

ng add @angular/material

Example 1: Basic Material Checkbox – src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import {MatCheckboxModule} from '@angular/material/checkbox';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

Angular Material Checkbox Example
 
Click to Check me!

Example 2: Material Checkbox with Reactive Form

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Don’t Miss : Form Checkbox With Angular Material(Mat-Checkbox) Example

src/app/app.component.html

Angular Material Checkbox Example - www.pakainfo.com
  

  
    Great, I Agree for condition...
      
    Submit

src/app/app.component.ts

import { Component } from '@angular/core';
  
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
@Component({
  selector: 'pakainfo-blog',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material2';
  
  form: FormGroup = new FormGroup({});
  
  constructor(private fb: FormBuilder) {
  
    this.form = fb.group({
      i_agree: ['', [Validators.required]],
    })
  }
   
  get f(){
    return this.form.controls;
  }
   
  submit(){
    console.log(this.form.value);
  }
}

I hope you get an idea about mat checkbox.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.