Angular Material Checkbox Example
September 17, 2017
This page will walk through Angular Material checkbox example. Angular Material provides MdCheckbox
directive which has <md-checkbox>
selector. <md-checkbox>
provides the same functionality as native <input type="checkbox">
enhanced with Material Design styling and animations. <md-checkbox>
can handle checkbox label, working with forms, indeterminate state, theming, accessibility and all native functionalities. <md-checkbox>
provides properties such as indeterminate, checked, labelPosition, change etc. MdCheckbox
also provides methods such as toggle(), focus(). <md-checkbox>
can be used with template-driven forms as well as reactive forms. The color of <md-checkbox>
is changed by using color
property. Here on this page we will provide steps to install Angular Material and complete example to work with <md-checkbox>
.
Contents
- Technologies Used
- Project Structure
- Install Angular Material
- Import MdCheckboxModule and BrowserAnimationsModule in Application Module
- MdCheckbox Directive: <md-checkbox> Selector
- change
- checked
- indeterminate
- labelPosition
- Theme: color
- <md-checkbox> with ngModel
- toggle()
- focus()
- Validate <md-checkbox>
- <md-checkbox> with Template-Driven Forms
- <md-checkbox> with Reactive Forms
- Run Application
- Reference
- Download Source Code
Technologies Used
Find the technologies being used in our example.1. Angular 4.2.4
1. Angular Material 2.0.0-beta.10
2. TypeScript 2.3.3
3. Node.js 6.10.1
4. Angular CLI 1.3.1
5. Angular Compiler CLI 4.2.4
Project Structure
Find the project structure of our demo application.angular-demo | |--src | | | |--app | | | | | |--md-checkbox-demo.component.ts | | |--md-checkbox-demo.component.html | | |--template-driven-form.component.ts | | |--template-driven-form.component.html | | |--reactive-form.component.ts | | |--reactive-form.component.html | | |--user.ts | | |--user-service.ts | | | | | |--app.component.ts | | |--app.module.ts | | | |--main.ts | |--index.html | |--styles.css | |--node_modules |--package.json
Install Angular Material
To use Angular with Angular Material, we need to follow below steps.1. Install Angular CLI using the link .
2. Now to install Angular Material, go to the project home directory using command prompt where
package.json
is located and run following command.
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
styles.css
file.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
hammerjs
. To install it use following command.
npm install --save hammerjs
src/main.ts
and import it as follows.
import 'hammerjs';
index.html
.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Find the reference link to install Angular Material.
Import MdCheckboxModule and BrowserAnimationsModule in Application Module
To work with Angular Material checkbox we need to importMdCheckboxModule
and BrowserAnimationsModule
in our application module.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdCheckboxModule } from '@angular/material'; @NgModule({ imports: [ ------ BrowserAnimationsModule, MdCheckboxModule ], ------ }) export class AppModule { }
To work with button, import
MdButtonModule
To work with input, import
MdInputModule
To work with table, import
MdTableModule
MdCheckbox Directive: <md-checkbox> Selector
MdCheckbox
has <md-checkbox>
selector. It supports all the functionalities of HTML 5 checkbox. It can have following states i.e. checked, unchecked, indeterminate or disabled. Here we will discuss methods and some of its properties.
Input Properties: indeterminate, checked, labelPosition, required, color etc.
Output Properties: indeterminateChange, change etc.
Methods: toggle(), focus()
Find the link for complete description of Angular Material checkbox API.
<md-checkbox>
is used as following.
<md-checkbox>Check me</md-checkbox>
md-checkbox-demo.component.html
<h3>MdCheckbox Demo</h3> <md-checkbox (change)="onChkChange()">change test</md-checkbox> <br/><br/> <md-checkbox [checked]="isChecked">checked test</md-checkbox> <br/>{{isChecked}} <br/><br/> <md-checkbox [(indeterminate)]="isIndeterminate">indeterminate test</md-checkbox> <br/>{{isIndeterminate}} <br/><br/> <md-checkbox [labelPosition]="chkLabelPosition">Label Position test</md-checkbox> <br/>{{chkLabelPosition}} <br/><br/> <md-checkbox color="primary">primary color test</md-checkbox> <br/> <md-checkbox color="warn">warn color test</md-checkbox> <br/><br/> <md-checkbox [(ngModel)]= "isChecked">ngModel test</md-checkbox> <br/><br/> <md-checkbox #tgchk>toggle() test</md-checkbox> <br/><br/> <md-checkbox #fschk>focus() test</md-checkbox>
import { Component, ViewChild } from '@angular/core'; import { MdCheckbox } from '@angular/material'; @Component({ selector: 'app-md-checkbox-demo', templateUrl: './md-checkbox-demo.component.html' }) export class MDCheckboxDemoComponent { @ViewChild('tgchk') toggleChk: MdCheckbox; @ViewChild('fschk') focusChk: MdCheckbox; isIndeterminate = false; isChecked = false; chkLabelPosition = 'after'; onChkChange() { console.log('Checked value changed.'); this.isChecked = (this.isChecked === true )? false : true; this.isIndeterminate = (this.isIndeterminate === true )? false : true; this.chkLabelPosition = (this.chkLabelPosition === 'after' )? 'before' : 'after'; this.toggleChk.toggle(); this.focusChk.focus(); } }

change
change
is an event and will emit when checked value of checkbox is changed. We use it as follows.
<md-checkbox (change)="onChkChange()">change test</md-checkbox>
onChkChange()
will be called.
onChkChange() { console.log('Checked value changed.'); }
checked
checked
can make a checkbox checked/unchecked. Find the example.
<md-checkbox [checked]="isChecked">checked test</md-checkbox>
isChecked
is true
then, checkbox will be checked. When the value of isChecked
is false
then, checkbox will be unchecked.
indeterminate
indeterminate
can make a checkbox indeterminate. This is also called 'mixed' mode. Whenever checkbox is manually clicked, indeterminate is immediately set to false. MdCheckbox
also provides indeterminateChange
. So we can use indeterminate
as two-way binding. It is used as follows.
<md-checkbox [(indeterminate)]="isIndeterminate">indeterminate test</md-checkbox>
isIndeterminate
is true, checkbox will be indeterminate.
labelPosition
labelPosition
decides label position. The values of labelPosition
is before and after. Default value is after.
<md-checkbox labelPosition="after">After Label Position test</md-checkbox> <md-checkbox labelPosition="before">Before Label Position test</md-checkbox>
Theme: color
<md-checkbox>
can change its color by using color
property. The default color of checkbox is accent color of theme. The values of color
can be primary or warn also.
<md-checkbox color="primary">primary color test</md-checkbox> <md-checkbox color="warn">warn color test</md-checkbox>
<md-checkbox> with ngModel
<md-checkbox>
can be bound with ngModel
. Find the example.
<md-checkbox [(ngModel)]= "isChecked">ngModel test</md-checkbox>
isChecked
is true, checkbox will be checked and when isChecked
is false, checkbox will be unchecked.
toggle()
toggle()
method toggles the checked state of checkbox. To use toggle()
method, first create a checkbox and assign a local template variable as given below.
<md-checkbox #tgchk>toggle() test</md-checkbox>
MdCheckbox
using @ViewChild
and passing the local template variable of the checkbox.
@ViewChild('tgchk') toggleChk: MdCheckbox;
toggle()
method as given below.
this.toggleChk.toggle();
focus()
focus()
method focuses the checkbox. To use focus()
method, first create a checkbox and assign a local template variable as given below.
<md-checkbox #fschk>focus() test</md-checkbox>
MdCheckbox
using @ViewChild
and passing the local template variable of the checkbox.
@ViewChild('fschk') focusChk: MdCheckbox;
focus()
method as given below.
this.focusChk.focus();
Validate <md-checkbox>
Suppose we want to validate checkbox to be required check, we need to userequired
property as given below.
<md-checkbox name="tc" [ngModel]="user.isTCAccepted" required #tc="ngModel"> Accept T & C</md-checkbox>
<div *ngIf="tc.invalid" [ngClass] = "'error'"> Accept T & C. </div>
<md-checkbox> with Template-Driven Forms
Here we will create template-driven from that will use Angular material checkbox, input and button. We will validate form and fetch its values.template-driven-form.component.html
<h3>Template Driven Form with MdCheckbox</h3> <p *ngIf="isValidFormSubmitted" [ngClass] = "'success'"> Form submitted successfully. </p> <form #userForm="ngForm" (ngSubmit)="onFormSubmit(userForm)"> <table md-table> <tr> <td> <input mdInput placeholder="Enter name" name="uname" [ngModel]="user.userName" required #uname="ngModel"> <div *ngIf="uname.invalid && userForm.submitted && !isValidFormSubmitted" [ngClass] = "'error'"> Name required. </div> </td> </tr> <tr> <td> <md-checkbox name="married" [ngModel]="user.isMarried" color="primary">Are you married?</md-checkbox> </td> </tr> <tr> <td> <md-checkbox name="tc" [ngModel]="user.isTCAccepted" required #tc="ngModel">Accept T & C</md-checkbox> <div *ngIf="tc.invalid && userForm.submitted && !isValidFormSubmitted" [ngClass] = "'error'"> Accept T & C. </div> </td> </tr> <tr> <td> <button md-raised-button color="primary">Submit</button> <button type="button" md-raised-button color="accent" (click)="setDefaultValues()">Set Default</button> <button type="button" md-raised-button color="warn" (click)="resetForm(userForm)">Reset</button> </td> </tr> </table> </form>
import { Component, OnInit } from '@angular/core'; import { NgForm } from '@angular/forms'; import { UserService } from './user-service'; import { User } from './user'; @Component({ selector: 'app-template', templateUrl: './template-driven-form.component.html' }) export class TemplateDrivenFormComponent { isValidFormSubmitted = false; user = new User(); constructor(private userService: UserService) { } onFormSubmit(form: NgForm) { this.isValidFormSubmitted = false; if(form.invalid){ return; } this.isValidFormSubmitted = true; this.user.userName = form.controls['uname'].value; this.user.isMarried = form.controls['married'].value; this.user.isTCAccepted = form.controls['tc'].value; this.userService.createUser(this.user); this.resetForm(form); } resetForm(form: NgForm) { form.resetForm({ married: false }); } setDefaultValues() { this.user.userName = 'Krishna'; this.user.isMarried = true; this.user.isTCAccepted = false; } }
export class User { userName: string; isMarried: boolean = false; isTCAccepted: boolean; }
import { Injectable } from '@angular/core'; import { User } from './user'; @Injectable() export class UserService { createUser(user: User) { //Log user data in console console.log("User Name: " + user.userName); console.log("Married?: " + user.isMarried); console.log("T & C accepted?: " + user.isTCAccepted); } }
<md-checkbox> with Reactive Forms
Here we will create reactive from that will use Angular material checkbox, input and button. We will validate form and fetch its values.reactive-form.component.html
<h3>Reactive Form with MdCheckbox</h3> <p *ngIf="isValidFormSubmitted && userForm.pristine" [ngClass] = "'success'"> Form submitted successfully. </p> <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()"> <table> <tr> <td> <input mdInput placeholder="Enter name" formControlName="uname"> <div *ngIf="userForm.get('uname').invalid && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> Name required. </div> </td> </tr> <tr> <td> <md-checkbox formControlName="married">Are you married?</md-checkbox> </td> </tr> <tr> <td> <md-checkbox formControlName="tc">Accept T & C</md-checkbox> <div *ngIf="userForm.get('tc').invalid && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> Accept T & C. </div> </td> </tr> <tr> <td> <button md-raised-button color="primary">Submit</button> <button md-raised-button color="accent" type="button" (click)="setDefaultValues()">Set Default</button> <button md-raised-button color="warn" type="button" (click)="reset()">Reset</button> </td> </tr> </table> </form>
import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { UserService } from './user-service'; import { User } from './user'; @Component({ selector: 'app-reactive', templateUrl: './reactive-form.component.html' }) export class ReactiveFormComponent { isValidFormSubmitted: boolean = null; userForm = new FormGroup({ uname: new FormControl('', Validators.required), married: new FormControl(false), tc: new FormControl('', Validators.required) }); user = new User(); constructor(private userService: UserService) { } onFormSubmit() { this.isValidFormSubmitted = false; if(this.userForm.invalid){ return; } this.isValidFormSubmitted = true; console.log(this.userForm.valid); this.user.userName = this.userForm.get('uname').value; this.user.isMarried = this.userForm.get('married').value; this.user.isTCAccepted = this.userForm.get('tc').value; this.userService.createUser(this.user); this.reset(); } reset() { this.userForm.reset({ married: false }); } setDefaultValues() { this.userForm.patchValue({uname: 'Krishna', married:true}); } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-md-checkbox-demo></app-md-checkbox-demo> <app-template></app-template> <app-reactive></app-reactive> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MdCheckboxModule, MdButtonModule, MdInputModule, MdTableModule } from '@angular/material'; import { AppComponent } from './app.component'; import { MDCheckboxDemoComponent } from './md-checkbox-demo.component'; import { TemplateDrivenFormComponent } from './template-driven-form.component'; import { ReactiveFormComponent } from './reactive-form.component'; import { UserService } from './user-service'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MdCheckboxModule, MdButtonModule, MdInputModule, MdTableModule ], declarations: [ AppComponent, MDCheckboxDemoComponent, TemplateDrivenFormComponent, ReactiveFormComponent ], providers: [ UserService ], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find following steps.1. Install Angular CLI using the link .
2. Install Angular Material using the link .
3. Download source code using download link given below on this page.
4. Use downloaded src in your angular CLI application.
5. Run ng serve using command prompt.
6. Now access the URL http://localhost:4200
Find the print screen of the output.
