mat checkbox – Angular Material Checkbox Example

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

<h4>Angular Material Checkbox Example</h4>
 
<mat-checkbox>Click to Check me!</mat-checkbox>

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

Read Also:  Array Expressions using Angular Example

src/app/app.component.html

<h1>Angular Material Checkbox Example - www.pakainfo.com</h1>
  
<form [formGroup]="form" (ngSubmit)="submit()">
  
    <mat-checkbox formControlName="i_agree">Great, I Agree for condition...</mat-checkbox>
      
    <button mat-raised-button color="accent">Submit</button>
</form>

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.