Angular Material 2.0.0 has been released recently for Angular 2. In order to integrate Angular Material in project, follow the below steps:

Step 1: Install npm package for angular material, hammerjs, material typing

npm install --save @angular/material hammerjs

npm install --save-dev @types/angular-material @types/hammerjs

Note:

The slide-toggle and slider components have a dependency on HammerJS.

Step 2: Include hammerjs to the types section of tsconfig.json file



{ "compilerOptions" : { "types" : [ "hammerjs" ] } }

Step 3: Include @angular/material to the SystemJS configuration in case project is SystemJS for module loading

System.config({ map: { ..., '@angular/material' : 'npm:@angular/material/bundles/material.umd.js' } });

Note:

Actual material 2 website state ‘npm:@angular/material/material.umd.js’ but I am getting error by systemjs, unable to find materialjs file, so simple solution is fix in url: ‘npm:@angular/material/bundles/material.umd.js’



Step 4: Include material css and hammerjs explicitly in _Layout.cshtml



@{ var lib = "@angular"; } <environment names="Development"> <link href="~/node_modules/@lib/material/core/theming/prebuilt/indigo-pink.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> http://~/node_modules/hammerjs/hammer.min.js </environment>

Step 5: Import the Angular Material NgModule



import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { HttpModule } from '@angular/http'; import { BrowserModule } from '@angular/platform-browser'; import { MaterialModule } from '@angular/material'; import 'node_modules/hammerjs/hammer.js'; import { DashboardMainModule } from './dashboard/dashboard.module'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app.routing'; import { APP_PROVIDERS } from './app.provider'; @NgModule({ imports: [ //angular builtin module BrowserModule, HttpModule, //ui module MaterialModule.forRoot(), //application feature module DashboardMainModule, AppRoutingModule ], declarations: [ AppComponent ], providers: [ APP_PROVIDERS ], bootstrap: [ AppComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class AppModule { }

Finally material integration is done and running.