angular-material2 Getting started with angular-material2 Installation or Setup with Angular CLI


Example

In this example, we will be using @angular/cli (latest) and the latest version of @angular/material. You should at least know the basics of Angular 2/4 before continuing the steps below.

  1. Install angular material module from npm:

    npm install @angular/material --save
    
2.0.0-beta.3

This only applies to versions 2.0.0-beta.3 and up.

Install the @angular/animations module:

npm install @angular/animations --save
2.0.0-beta.8

This only applies to versions 2.0.0-beta.8 and up.

Install the @angular/cdk module:

npm install @angular/cdk --save
  1. In your application module import the components which you are going to use:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
         imports: [
             BrowserAnimationsModule,
             MdButtonModule,
             MdSnackBarModule,
             MdSidenavModule,
             CommonModule,
             // This is optional unless you want to have routing in your app
             // RouterModule.forRoot([
             //     { path: '', component: HomeView, pathMatch: 'full'}
             // ])
         ],
         declarations: [ AppComponent ],
         boostrap: [ AppComponent ]
    })
    export class AppModule {}
    

You are now ready to use Angular Material in your components!

Note: The docs for specific components will be coming soon.