An Introduction Into Using Angular’s Material Design
6 likes3,690 views
The document discusses Angular Material, including its components, styling, and how to get started with it. It covers version information, component categories, and provides guidance on building applications with Angular Material and deploying them to Firebase. Additionally, it includes links to resources and examples for further learning.
An Introduction Into Using Angular’s Material Design
- 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
- 12. Custom Themes Check guides at material.angular.io @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
- 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
- 26. @ladyleet What You Learned Today Components & Styling Tips: Getting Started Building with Angular Material Deploying Angular Apps to Firebase
- 28. @ladyleet Twitter @ladyleet Github @ladyleet Medium @ladyleet www.ladyleet.com www.thisdot.co Tracy Lee
- 29. ngcruise.com - May 29th! - Miami - Caribbean