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 @angular/material

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

Utilizing Custom Theme within Component

YourC­omp­one­nt.co­mpo­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.sc­ss';

// Use md-color to extract individual colors from a palette as necess­ary.
.You­rClass {
 ­ ­ ­  backg­rou­nd-­color: md-col­or(­$Y­our­App­-a­pp-­pri­mary);
 ­ ­ ­ ­bo­rde­r-c­olor: md-col­or(­$Y­our­App­-a­pp-­acc­ent);
}

Button Toggle

<­md-­but­ton­-to­ggl­e>
Prope­rties:
Name
Type
Desc­rip­tion
[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
 
Desc­rip­tion
(change)
Emitted when checked value is changed
<­md-­but­ton­-to­ggl­e-g­rou­p>
Prope­rties:
Name
Type
Desc­rip­tion
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
 
Desc­rip­tion
(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
<m­d-b­utt­on-­tog­gle­-gr­oup­>
    <m­d-b­utt­on-­tog­gle> Option One </m­d-b­utt­on-­tog­gle­>
    <m­d-b­utt­on-­tog­gle> Option Two </m­d-b­utt­on-­tog­gle­>
</­md-­but­ton­-to­ggl­e-g­rou­p>

Base Component Cheat Sheet

<­md-­>
Prope­rties:
Name
Type
Desc­rip­tion
Events:
Name
 
Desc­rip­tion
Basic usage

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