Table of Contents

Angular Material 2 brings Material Design components to Angular 2+ apps. The goal of the project is to build a full array of components to make it very easy to built Material Design interfaces for mobile and desktop.

The latest release of Angular Material depends on Angular 4+

Here's how to get started with Angular Material 2:

1. npm install angular-material & hammerjs

angular material illustration for: 1. npm install angular-material & hammerjs

First install Angular Material, Angular animations, and Hammer.js in your project with these commands:

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

				
			
				
					
npm install --save hammerjs

<^>Hammer.js<^> is an optional dependency and helps with touch support for a few of the components.

2. angular-cli.json

If you decide to use Hammer.js, and given that you've started your project with the Angular CLI, modify your <^>angular-cli.json<^> file to add the Hammer.js library. Look for the Json *"scripts"* array and add the following path for hammer.js:

				
					
[label angular-cli.json]

"scripts": [

 "../node_modules/hammerjs/hammer.min.js"

],

You may need to restart your local server for the changes to angular-cli.json to take effect.

3. Custom Material Module

Prior to Angular Material 2 Beta 3, there was a global <^>MaterialModule<^> that could be imported in the app module to make the components available. The downside to that is that tree-shaking is not efficient enough to remove all the unused code.

MaterialModule has therefore been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. Here's what our module can look like:

				
					
[label material.module.ts]

import { NgModule } from '@angular/core';



import {

 MatButtonModule,

 MatMenuModule,

 MatToolbarModule,

 MatIconModule,

 MatCardModule

} from '@angular/material';



@NgModule({

 imports: [

 MatButtonModule,

 MatMenuModule,

 MatToolbarModule,

 MatIconModule,

 MatCardModule

 ],

 exports: [

 MatButtonModule,

 MatMenuModule,

 MatToolbarModule,

 MatIconModule,

 MatCardModule

 ]

})

export class MaterialModule {}

You'll then import this module in the root app module.

4. Add Angular Material to your app module

Import MaterialModule and add it to your imports. You'll also need to import the necessary for animations in your module. Your app module (e.g.: <^>app.module.ts<^>) will look a little bit like this:

				
					
[label app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { MaterialModule } from './material.module';

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



import { AppComponent } from './app.component';



@NgModule({

 declarations: [

 AppComponent

 ],

 imports: [

 BrowserModule,

 FormsModule,

 HttpModule,

 MaterialModule,

 BrowserAnimationsModule

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

5. Import a pre-built theme and Material icons

There are a few pre-built themes installed automatically with Angular Material. These set the colors and basic styling. The available themes are: <^>indigo-pink<^>, <^>deeppurple-amber<^>, <^>purple-green<^> and <^>pink-bluegrey<^>.

To import a theme, you can add something like this to your global <^>styles.css<^> file:

				
					
[label styles.css]

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

—

You can also have access to the Material Design icons and use named icons with the <^><mat-icon><^> component. To import them to your project, you can add this to the head section of your project's root <^>index.html<^> file:

				
					
[label index.html]

&lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;

6. Angular Material is ready!

It's now ready for you to start using the available Angular Material components in your templates. Here's for example some markup for a template of a sample app:

				
					
&lt;div&gt;

 &lt;mat-toolbar color="primary"&gt;

 &lt;span&gt;&lt;mat-icon&gt;mood&lt;/mat-icon&gt;&lt;/span&gt;



 &lt;span&gt;Yay, Material in Angular 2!&lt;/span&gt;



 &lt;button mat-icon-button [mat-menu-trigger-for]="menu"&gt;

 &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;

 &lt;/button&gt;

 &lt;/mat-toolbar&gt;

 &lt;mat-menu x-position="before" #menu="matMenu"&gt;

 &lt;button mat-menu-item&gt;Option 1&lt;/button&gt;

 &lt;button mat-menu-item&gt;Option 2&lt;/button&gt;

 &lt;/mat-menu&gt;



 &lt;mat-card&gt;

 &lt;button mat-button&gt;All&lt;/button&gt;

 &lt;button mat-raised-button&gt;Of&lt;/button&gt;

 &lt;button mat-raised-button color="primary"&gt;The&lt;/button&gt;

 &lt;button mat-raised-button color="accent"&gt;Buttons&lt;/button&gt;

 &lt;/mat-card&gt;



 &lt;span class="done"&gt;

 &lt;button mat-fab&gt;

 &lt;mat-icon&gt;check circle&lt;/mat-icon&gt;

 &lt;/button&gt;

 &lt;/span&gt;

&lt;/div&gt;

And to this we added only the following CSS to our global <^>styles.css<^>:

				
					
[label styles.css]

body {

 margin: 0;

 font-family: Roboto, sans-serif;

}



mat-card {

 max-width: 80%;

 margin: 2em auto;

 text-align: center;

}

mat-toolbar-row {

 justify-content: space-between;

}

And here's the look of our sample app:

Learning More

Here are a few more posts to help you get started:

Resources & links