Angular 2 Material Cheat Sheet (DRAFT) by walkernel

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,
        ...
        ].
     ],
...
}

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()],
...
})

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);
}