Show Menu

Angular Material 2 Cheat Sheet by

Tags for Angular Material 2
development     programming     angular     material     angular2


1. Install Node.js and NPM

2. Install Angular CLI to global cache
npm install -g @angul­ar/cli

3. Create project using Angular CLI
ng new <pr­oje­ct-­nam­e>

4. Install Angular Material 2 to the project directory
npm install --save @angul­ar/­mat­erial

Tab Layout

 <md-tab-group [selectedIndex]="0">
  <md-tab label="Breakfast">
   <h3>Breakfast option</h3>
   <p>Western Omlet</p>
  <md-tab label="Lunch">
   <h3>Lunch option</h3>
  <md-tab label="Dinner">
   <h3>Dinner option</h3>

Card Layout

  <md-card-title>Star Destroyer</md-card-title>
  <md-card-subtitle>Side: Empire</md-card-subtitle>
  A giant triangle ship

Toolbar Navigation

<md-toolbar color="primary">
 <button md-raised-button color="accent">
  <i class="material-icons">home</i>
 <button md-raised-button color="accent">

Side Navigation

<md-sidenav-container class="example-container">
 <md-sidenav #sidenav class="example-sidenav">

 <div class="example-sidenav-content">
  <button md-button (click)="">

Menu Navigation

<button md-raised-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
 <button md-menu-item>Home</button>
 <button md-menu-item>FAQ</button>
 <button md-menu-item>Support</button>

Input Text

  <input mdInput placeholder="To Do" value="Buy Bread">

Input Date

  <input mdInput placeholder="Due Date" type="Date">

Input Number

  <input mdInput placeholder=­"Priority" type="number" value="1">

Radio Button Control

  <md-radio-button value="visa">Visa</md-radio-button>
  <md-radio-button value="mc">Mastercard</md-radio-button>

Select Control

  <md-radio-button value="visa">Visa</md-radio-button>
  <md-radio-button value="mc">Mastercard</md-radio-button>

Checkbox Control



Flat Button
<button md-but­ton­>Flat button­</b­utt­on>
Raided Button
<button md-rai­sed­-bu­tto­n>R­aised button­</b­utt­on>
Fab Icon
<button md-fab­><m­d-i­con­>ad­d</­md-­ico­n><­/bu­tto­n>
Mini Fab Icon
<button md-min­i-f­ab>­<md­-ic­on>­add­</m­d-i­con­></­but­ton>
Link Button
<a md-button router­Lin­k="."­>­Flat Link</­a>
Raised Link Button
<a md-rai­sed­-button router­Lin­k="."­>­Raised Link</­a>
Fab Link Icon
<a md-fab router­Lin­k="."­>­<m­d-i­con­>ad­d</­md-­ico­n><­/a>
Fab Mini Link Icon
<a md-min­i-fab router­Lin­k="."­>­<m­d-i­con­>ad­d</­md-­ico­n><­/a>


Progress Bar
<md­-pr­ogr­ess-bar mode="i­nde­ter­min­ate­"­></­md-­pro­gre­ss-­bar>
Tool Tip
<span mdTool­tip­="He­llo­!">I have a toolti­p</­spa­n>

Download the Angular Material 2 Cheat Sheet

2 Pages

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors! is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!



No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Regular Expressions Cheat Sheet

          More Cheat Sheets by GregFinzer

          Yarn Package Manager Cheat Sheet
          RhinoMocks Cheat Sheet