Show Menu
Cheatography
  1. Home >
  2. Programming >

Angular Material 2 Cheat Sheet by

Tags for Angular Material 2

Links

Setup

1. Install Node.js and NPM
https:­//n­ode­js.o­rg­/en­/do­wnload/

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-card>
 <md-tab-group [selectedIndex]="0">
  <md-tab label="Breakfast">
   <h3>Breakfast option</h3>
   <p>Western Omlet</p>
  </md-tab>
  <md-tab label="Lunch">
   <h3>Lunch option</h3>
   <p>Salad</p>
  </md-tab>
  <md-tab label="Dinner">
   <h3>Dinner option</h3>
   <p>Tacos</p>
  </md-tab>
 </md-tab-group>
</md-card>

Card Layout

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

Toolbar Navigation

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

Side Navigation

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

 <div class="example-sidenav-content">
  <button md-button (click)="sidenav.open()">
   Open
  </button>
 </div>
</md-sidenav-container>

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>
</md-menu>
 

Input Text

<md-input-container>
  <input mdInput placeholder="To Do" value="Buy Bread">
</md-input-container>

Input Date

<md-input-container>
  <input mdInput placeholder="Due Date" type="Date">
</md-input-container>

Input Number

<md-input-container>
  <input mdInput placeholder=­"Priority" type="number" value="1">
</md-input-container>

Radio Button Control

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

Select Control

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

Checkbox Control

<md­checkbox­>Completed</md-checkbox>

Buttons

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>

Indicators

Icon
<md­-ic­on>­hom­e</­md-­ico­n>
Spinner
<md­-sp­inn­er>­</m­d-s­pin­ner>
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>
 

Metadata

  • Languages:
  • Published: 24th March, 2017
  • Last Updated: 6th April, 2017
  • Rated: 5 stars based on 1 ratings

Favourited By

geronimoooooooo catchatpas Ester theseth mattsterp isaklafleur

Comments

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 Models Cheat Sheet
          MSTest Cheat Sheet
          Crownpeak Input Validation Cheat Sheet