@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 & Styling
Components
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
MaterialPalette.com
@ladyleet
Pre-Built Themes
/node_modules/@angular/material/core/theming/prebuilt
@ladyleet
Custom Themes
Check guides at material.angular.io
@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

Angular Material (2) - NgVikingsConf

  • 1.
    @ladyleet “Nothing is asimportant as passion.” —Jon Bon Jovi
  • 2.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 3.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 4.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 5.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 6.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 7.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 8.
    @ladyleet Twitter: @ladyleet Co-Founder: ThisDot 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
  • 9.
  • 10.
  • 11.
    @ladyleet What We’ll LearnToday Components & Styling Tips: Getting Started Building with Angular Material
  • 12.
    Angular Material 2.0.0-beta.1 Angular2.4.6 Angular-CLI 1.0.0-beta.30 @ladyleet Versions
  • 13.
    @ladyleet Components & Styling Components Layout Navigation FormControls Popups & Modals Buttons, Indicators & Icons Styling Material Design Colors Default Themes Custom Themes
  • 14.
    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
  • 15.
    Material Styling Material DesignColors Default Themes Custom Themes @ladyleet
  • 16.
  • 17.
  • 18.
    Custom Themes Check guidesat material.angular.io @ladyleet
  • 19.
  • 20.
    Building a PunApp @ladyleet Angular Material
  • 21.
    Create new appwith angular-cli ng new name-of-app $ cd name-of-app Install Angular Material (2) $ npm install -S @angular/material Getting Started @ladyleet
  • 22.
    Import MaterialModule import {MaterialModule } from ‘@angular/material’; Add to imports array MaterialModule.forRoot() @ladyleet MaterialModule
  • 23.
  • 24.
  • 25.
    @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
  • 26.
    @ladyleet What You LearnedToday Components & Styling Tips: Getting Started Building with Angular Material
  • 27.
    @ladyleet Twitter @ladyleet Github @ladyleet Medium@ladyleet www.ladyleet.com www.thisdot.co Tracy Lee
  • 28.
    ngcruise.com - May29th! - Miami - Caribbean