angular material (2) - ngvikingsconf
TRANSCRIPT
@ladyleet
“Nothing is as important as passion.”
—Jon Bon Jovi
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, React, LondonJS, AngularZone, UtahJS,whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, whatever, LondonJS, AngularZone, UtahJS, whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, whatever, LondonJS, AngularZone, UtahJS, whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, whatever, LondonJS, AngularZone, UtahJS, whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, whatever, LondonJS, AngularZone, UtahJS, whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, whatever, LondonJS, AngularZone, UtahJS, whatever, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
@ladyleet
Twitter: @ladyleet Co-Founder: This Dot Previously: Dishcrawl Organizer: Ng-Cruise Podcaster: Modern Web Blog: medium.com/@ladyleet Speaker: NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, ReactNLConf, LondonJS, AngularZone, UtahJS, GEMConf, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJS
Tracy Lee
Intro to Angular Material (2)
@ladyleet
@ladyleet
What is ngular Material?
@ladyleet
What We’ll Learn Today
Components & Styling Tips: Getting Started
Building with Angular Material
Angular Material 2.0.0-beta.1 Angular 2.4.6
Angular-CLI 1.0.0-beta.30
@ladyleet
Versions
@ladyleet
Components & StylingComponents Layout Navigation Form Controls Popups & Modals Buttons, Indicators & Icons
Styling Material Design Colors Default Themes Custom Themes
Available Components (22)
Layout • List • Grid list • Card • Tabs
Popups & Modals • Dialog • Tooltip • Snackbar
Form Controls • Checkbox • Input • Radio Button • Select • Slider • Slide Toggle
Navigation • Menu • Sidenav • Toolbar
Buttons, Indicators & Icons • Button types • Button toggle • Chips • Icon • Progress Spinner • Progress bar
@ladyleet
Material Styling
Material Design Colors Default Themes Custom Themes
@ladyleet
Pre-Built Themes
/node_modules/@angular/material/core/theming/prebuilt
@ladyleet
Building With Material Components
@ladyleet
Building a Pun App@ladyleet
Angular Material
Create new app with angular-cli
ng new name-of-app $ cd name-of-app
Install Angular Material (2)
$ npm install -S @angular/material
Getting Started
@ladyleet
Import MaterialModule
import { MaterialModule } from ‘@angular/material’;
Add to imports array
MaterialModule.forRoot()
@ladyleet
MaterialModule
@ladyleet
Font, Icons & Themes
@ladyleet
Custom CSS
@ladyleet
Component Demonstration- toolbar (md-toolbar, md-toolbar-row) - sidenav (md-sidenav-container, md-sidenav) - icon (md-icon)
- grid list (md-grid-list, md-grid-tile) - chips (md-chip-list, md-chip)
- tooltip (mdTooltip) - dialog (md-dialog-title, md-dialog-content, md-dialog-actions, md-dialog-
close) - raised button (md-raised-button)
- card (cats) (md-card, md-card-title, md-card-content) - md list (banana) (md-list, md-list-item) - tabs (cow) (md-tab-group, md-tab) - snackbar
@ladyleet
What You Learned Today
Components & Styling Tips: Getting Started
Building with Angular Material
@ladyleet
Twitter @ladyleet
Github @ladyleet
Medium @ladyleet
www.ladyleet.com
www.thisdot.co
Tracy Lee
ngcruise.com - May 29th! - Miami - Caribbean