@ladyleet

“Nothing is as important as passion.”

—Jon Bon Jovi

@ladyleet

Twitter: @ladyleetCo-Founder: This DotPreviously: DishcrawlOrganizer: Ng-CruisePodcaster: Modern WebBlog: medium.com/@ladyleetGoogle Developer Expert: AngularSpeaker:NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, ReactNLConf, LondonJS, AngularZone, UtahJS, GEMConf, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJSTracy Lee

Intro to Angular Material (2)

@ladyleet

@ladyleet

What is ngular Material?

@ladyleet

What We’ll Learn Today

Components & StylingTips: Getting Started

Building with Angular MaterialDeploying Angular Apps to Firebase

Angular Material 2.0.0-beta.2Angular 4.0.0.rc-2

Angular-CLI 1.0.0-rc.1

@ladyleet

Versions

@ladyleet

Components & StylingComponentsLayoutNavigationForm ControlsPopups & ModalsButtons, Indicators & Icons

StylingMaterial Design ColorsDefault ThemesCustom 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 ColorsDefault ThemesCustom Themes

@ladyleet

MaterialPalette.com

@ladyleet

Pre-Built Themes

/node_modules/@angular/material/core/theming/prebuilt

@ladyleet

Custom ThemesCheck guides at material.angular.io

@ladyleet

Building WithMaterial 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)- 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

Changing Themes is Easy

/node_modules/@angular/material/core/theming/prebuilt

@ladyleet

Deploying to Firebasehttps://jdays-e68f8.firebaseapp.com/

In Progresshttps://github.com/angular/material2

@ladyleet

In Progresshttps://github.com/angular/material2

@ladyleet

Flex Layouthttp://github.com/angular/flex-layout

https://tburleson-layouts-demos.firebaseapp.com/#/docs

@ladyleet

Angular Flex Layout

https://tburleson-layouts-demos.firebaseapp.com/#/docs

@ladyleet

What You Learned Today

Components & StylingTips: Getting Started

Building with Angular MaterialDeploying Angular Apps to Firebase

@ladyleet

https://jdays-e68f8.firebaseapp.com/

@ladyleet

Twitter @ladyleet

Github @ladyleet

Medium @ladyleet

www.ladyleet.com

www.thisdot.co

Tracy Lee

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