Angular Material Checkbox Example

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 

npm install --save @angular/material @angular/cdk 

npm install --save @angular/animations 

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

npm install --save hammerjs 

import 'hammerjs'; 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdCheckboxModule } from '@angular/material';

@NgModule({
  imports: [  
    ------
    BrowserAnimationsModule, 
    MdCheckboxModule 
  ],
  ------
})
export class AppModule { } 

<md-checkbox>Check me</md-checkbox> 

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

<md-checkbox (change)="onChkChange()">change test</md-checkbox> 

onChkChange() {
   console.log('Checked value changed.');
} 

<md-checkbox [checked]="isChecked">checked test</md-checkbox> 

<md-checkbox [(indeterminate)]="isIndeterminate">indeterminate test</md-checkbox> 

<md-checkbox labelPosition="after">After Label Position test</md-checkbox>
<md-checkbox labelPosition="before">Before Label Position test</md-checkbox> 

<md-checkbox color="primary">primary color test</md-checkbox>
<md-checkbox color="warn">warn color test</md-checkbox> 

<md-checkbox [(ngModel)]= "isChecked">ngModel test</md-checkbox> 

<md-checkbox #tgchk>toggle() test</md-checkbox> 

@ViewChild('tgchk')
toggleChk: MdCheckbox; 

this.toggleChk.toggle(); 

<md-checkbox #fschk>focus() test</md-checkbox> 

@ViewChild('fschk')
focusChk: MdCheckbox; 

this.focusChk.focus(); 

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

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

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