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...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Angular Material Textarea Tutorial
- Angular Material Radio Button Example
- Angular Material Input Box Example
- Angular Material Select Box | Angular 9/8 mat-select Reactive Form Example
- Angular Validation Password and Confirm Password
- Angular Validation for URL Example
- 10 Digit Mobile Number Validation in Angular
- Allow Only Numbers in Textbox using Angular
- Angular Checkbox Example | Angular 9/8 Checkbox Tutorial