Materializing Angular

Speaking at the #DevFest17 organized by the Google Developer Group - Pune

Google’s Material Design has been popular and widely used since the release of Android Lollipop and Inbox. Most of Google’s mobile applications for Android as well as desktop Web-interfaces had applied the new design language. There are many frameworks available based on Material Design Specification including Material Components for iOS, Android and Web, Material for Angular v.1 & v.2+.

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

Material design components are available for AngularJS as well as Angular. We’ll be focusing in this post about Angular Material i.e.for Angular apps v.2.x.x. and above.

Version : 2.0.0-beta.12

Installation

npm install — save @angular/material @angular/cdk
npm install --save @angular/animations
npm install --save hammerjs

Import modules

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
      ...
      imports: [MatButtonModule, MatCheckboxModule],
      ...
 })
export class TutorialAppModule { }

Use components

<mat-checkbox>Check me!</mat-checkbox>
<mat-checkbox indeterminate="true">Check me again!</mat-checkbox>
<button mat-button>Click me!</button>
<button mat-button color="primary">Click Me</button>
<button mat-button mat-raised-button color="primary">
    Click Me
</button>

To make it even faster, use VS Code Snippets specifically designed for Angular Material.

Angular Material v2 snippets - Visual Studio Marketplace

Get presentation of Google Talk below

Materializing Angular