Angular Material 2 has been evolving over the course of the past year, and it has finally become stable enough to use in production. Get familiar with the various components of Angular Material, how to use them in your app, and a few tips and tricks to getting started.

1. @ladyleet
“Nothing is as important as
passion.”
—Jon Bon Jovi

2. @ladyleet
Twitter: @ladyleet
Co-Founder: This Dot
Previously: Dishcrawl
Organizer: Ng-Cruise
Podcaster: Modern Web
Blog: medium.com/@ladyleet
Google Developer Expert: Angular
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

3. Intro to
Angular Material (2)
@ladyleet

4. @ladyleet
What is ngular Material?

5. @ladyleet
What We’ll Learn Today
Components & Styling
Tips: Getting Started
Building with Angular Material
Deploying Angular Apps to Firebase

6. Angular Material 2.0.0-beta.2
Angular 4.0.0.rc-2
Angular-CLI 1.0.0-rc.1
@ladyleet
Versions

7. @ladyleet
Components & Styling
Components
Layout
Navigation
Form Controls
Popups & Modals
Buttons, Indicators & Icons
Styling
Material Design Colors
Default Themes
Custom Themes

8. 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

9. Material Styling
Material Design Colors
Default Themes
Custom Themes
@ladyleet

10. MaterialPalette.com
@ladyleet

11. Pre-Built Themes
/node_modules/@angular/material/core/theming/prebuilt
@ladyleet

12. Custom Themes
Check guides at material.angular.io
@ladyleet

13. Building With
Material Components
@ladyleet

14. Building a Pun App
@ladyleet
Angular Material

15. 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

16. Import MaterialModule
import { MaterialModule } from
‘@angular/material’;
Add to imports array
MaterialModule.forRoot()
@ladyleet
MaterialModule

17. @ladyleet
Font, Icons & Themes

18. @ladyleet
Custom CSS

19. @ladyleet
Component Demonstration
- toolbar (md-toolbar, md-toolbar-row)
- sidenav (md-sidenav-container, md-sidenav)
- icon (md-icon)
- button (md-button)
- 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

20. Changing Themes is Easy
/node_modules/@angular/material/core/theming/prebuilt
@ladyleet

21. Deploying to Firebase
https://jdays-e68f8.firebaseapp.com/

22. In Progress
https://github.com/angular/material2
@ladyleet

23. In Progress
https://github.com/angular/material2
@ladyleet

24. Flex Layout
http://github.com/angular/flex-layout
https://tburleson-layouts-demos.firebaseapp.com/#/docs
@ladyleet

25. Angular Flex Layout
https://tburleson-layouts-demos.firebaseapp.com/#/docs

26. @ladyleet
What You Learned Today
Components & Styling
Tips: Getting Started
Building with Angular Material
Deploying Angular Apps to Firebase

27. @ladyleet
https://jdays-e68f8.firebaseapp.com/

28. @ladyleet
Twitter @ladyleet
Github @ladyleet
Medium @ladyleet
www.ladyleet.com
www.thisdot.co
Tracy Lee

29. ngcruise.com - May 29th! - Miami - Caribbean