Angular Material - Installation or Setup with angular cli in angular material2 - Angular Material Tutorial

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.

Install angular material module from npm:

npm install @angular/material --save

his only applies to versions 2.0.0-beta.3 and up. Install the @angular/animations module:

npm install @angular/animations --save

his only applies to versions 2.0.0-beta.8 and up. Install the @angular/cdk module

npm install @angular/cdk --save

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!

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap