Angular Material Checkbox Example

Hi Dev,

This simple article demonstrates of angular material checkbox example. if you have question about checkbox angular material example then i will give simple example with solution. i would like to show you angular material mat-checkbox example. i explained simply about angular material mat-checkbox. Alright, let’s dive into the steps.

I’m going to show you about angular material mat checkbox with reactive form. if you have question about angular material checkbox example then i will give simple example with solution.

We can create material checkbox in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13.

I will give you two simple example with angular:

1) Basic Material Checkbox

2) Material Checkbox with Reactive Form

You can see bellow layout for demo:

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

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

Here, we will create very simple example. first we need to import MatCheckboxModule for mat-checkbox material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

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

Here, we will create very simple example using reactive form. first we need to import MatCheckboxModule, MatButtonModule, FormsModule and ReactiveFormsModule for mat-checkbox material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

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 - ItSolutionStuff.com</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);
  }
}

You can easily run by following command:

ng serve

I hope it can help you...