Show Menu
Cheatography

Angular 2 Material Cheat Sheet (DRAFT) by

Angular 2 Material Design

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Available Components

button
cards
checkbox
sidenav
radio
toolbar
input
list
slide-­toggle
icon
button­-toggle
progre­ss-­circle
slider
progre­ss-bar
tabs

Custom Theming Setup

Create palette.scss in /src


palette.scss:
@import '~@angular/material/src/lib/core/theming/all-theme';

@include md-core();

$YourApp-app-primary: md-palette(PimaryColor);
$YourApp-app-accent: md-palette(AccentColor);
$YourApp-app-warn: md-palette(WarnColor);

$YourApp-app-theme: md-light-theme($YourApp-app-primary, $YourApp-app-accent, $YourApp-app-warn);

Add palette.scss to the styles array in angular-cli.json

angular-cli.json:
{
...,
"apps": [
    ...,
    "styles": [
        ...,
        palette.scss,
        ...
        ].
     ],
...
}
A word in italics must be replaced with relevant info specific to your setup.
 

Setup

CMD
npm install --save @angul­ar/­mat­erial

src/ap­p/a­pp.m­od­ule.ts
import { Materi­alM­odule } from '@angu­lar­/ma­ter­ial';
...
@NgMod­ule({
imports: [Mater­ial­Mod­ule.fo­rRo­ot()],
...
})

Utilizing Custom Theme within Component

YourCo­mponent.compo­nen­t.css

@import '~@ang­ula­r/m­ate­ria­l/s­rc/­lib­/co­re/­the­min­g/t­hem­ing';
@import 'src/p­ale­tte.scss';

// Use md-color to extract individual colors from a palette as necessary.
.YourClass {
 ­ ­ ­  backgr­oun­d-c­olor: md-color($YourApp-app-p­rim­ary);
 ­ ­ ­ border­-color: md-color($YourApp-app-a­ccent);
}

Button Toggle

<md­-bu­tto­n-t­ogg­le>
Proper­ties:
Name
Type
Descri­ption
[id]
string
Id of the toggle
[name]
string (optional)
used to differ­entiate between different toggle groups
[checked]
Boolean (optional)
Whether or not the toggle is checked
[disabled]
Boolean (optional)
Whether or not the toggle is disabled
Events:
   
Name
 
Descri­ption
(change)
 
Emitted when checked value is changed
<md­-bu­tto­n-t­ogg­le-­gro­up>
Proper­ties:
Name
Type
Descri­ption
name
string (optional)
Name of group
disabled
boolea­n(o­pti­onal)
default is false
value
any
Set to the value(s) of the selected toggle(s)
selected
mdButt­onT­oggle
Currently selected toggle(s)
Multiple
Boolea­n(o­pti­onal)
default is false, whether or not group allows multiple selection
Events:
   
Name
 
Descri­ption
(change)
 
Emitted when value of group changes
Basic usage
<md­-bu­tto­n-t­ogg­le>­Toggle Me </m­d-b­utt­on-­tog­gle>
Group
<md­-bu­tto­n-t­ogg­le-­gro­up>
 ­ ­ ­ ­<md­-bu­tto­n-t­ogg­le> Option One </m­d-b­utt­on-­tog­gle>
 ­ ­ ­ ­<md­-bu­tto­n-t­ogg­le> Option Two </m­d-b­utt­on-­tog­gle>
</m­d-b­utt­on-­tog­gle­-gr­oup>

Base Component Cheat Sheet

<md­->
Proper­ties:
Name
Type
Descri­ption
     
Events:
   
Name
 
Descri­ption
     
Basic usage