Getting Started With Angular Material 2

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 project recently reached its first beta release and is in heavy development. That means that things may change rapidly. This post will be updated to reflect changes.

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

1. npm install angular-material & hammerjs

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

$ npm install --save @angular/material
$ npm install --save hammerjs

Hammer.js is a dependency and helps with touch support.

2. angular-cli.json

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:

"scripts": [

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

3. Add Angular Material to your app module

Import MaterialModule and add it to your imports. Your app module (e.g.: app.module.ts) will look a little bit like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';

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

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

4. 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.

You can also have access to the Material Design icons and use named icons with <md-icon>. To import both a theme and the Material Design icons to your project, you would add this to your global styles.css:

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

5. 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:

  <md-toolbar color="primary">

    <span>Yay, Material in Angular 2!</span>

    <button md-icon-button [md-menu-trigger-for]="menu">
  <md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item>Option 1</button>
    <button md-menu-item>Option 2</button>

    <button md-button>All</button>
    <button md-raised-button>Of</button>
    <button md-raised-button color="primary">The</button>
    <button md-raised-button color="accent">Buttons</button>

  <span class="done">
    <button md-fab>
      <md-icon>check circle</md-icon>

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

body {
  margin: 0;
  font-family: Roboto, sans-serif;

md-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;

md-toolbar-row {
  justify-content: space-between;

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;

And here's the look of our sample app:

Our sample Material Design app


🔎 Searching...