Hello Devs, 

In this tutorial, we will learn Angular 9 Material Checkbox Example | Angular mat-checkbox

In this section, we will  create material checkbox in angular 6, angular 7, angular 8 and angular 9.

Follow this step by step guide below. 



Create New App

ng new app-material


Add Material Design

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes


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



src/app/app.component.html

<h1>Angular Material Checkbox Example - rathorji.in</h1>

  

<form [formGroup]="form" (ngSubmit)="submit()">

  

    <mat-checkbox formControlName="i_agree">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: 'app-root',

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

  }

}



May this example help you.