Downloaded 32 times
Uploaded byTracy Lee
Angular Material (2) - NgVikingsConf
The document is an overview of Tracy Lee's engagement in the tech community, particularly focusing on Angular Material. It covers key components, styling tips, and the necessary steps to get started with Angular Material. Additionally, it provides a list of various resources, themes, and examples for building applications using Angular Material.
More Related Content
![신입 개발자 생활백서 [개정판]](https://cdn.slidesharecdn.com/ss_thumbnails/random-170208062532-thumbnail.jpg?width=640&height=640&fit=bounds)
![Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]](https://cdn.slidesharecdn.com/ss_thumbnails/refactr-190614202717-thumbnail.jpg?width=640&height=640&fit=bounds)
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. Intro to Angular Material(2) @ladyleet
- 10. @ladyleet What is ngularMaterial?
- 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. @ladyleet Font, Icons &Themes
- 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