Angular Material 2 Cheat Sheet

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

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

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

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

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

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

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

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

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

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

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