Show Menu

Angular Material 2 Cheat Sheet by

Tags for Angular Material 2



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>

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi


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

          Crownpeak Input Controls Cheat Sheet
          T4 Templates Cheat Sheet