Materializing Angular

Find Google Slides @ https://bit.ly/devfest-pune-17

Transcript

2. Materializing Angular 7 October, 2017 Google DevFest | Pune Hardik Pithva @hardikpthv
3. Play @ youtu.be/jE1EU1ACe6s
4. What is Material Design? A unified system that combines: • Theory • Resources • Tools
5. Principles Material is the metaphor Bold, graphic, intentional Motion provides meaning
6. Bold, graphic, intentional Relevant Informative Delightful
8. Motion provides meaning ​Respects and reinforces the user as the prime mover Meaningful and appropriate, serving focus to attention Subtlety clear feedback
10. Components Helps to create beautiful apps with modular and customizable UI components Accurate Regularly updated Open source Android, iOS and Web material.io/components
13. Icons material.io/icons
14. Typography fonts.google.com/specimen/Roboto
15. Color Palette
16. Resizer material.io/resizer
17. Material Design in
18. Available for... v.2.x.x or above material.angular.io v.1.x.x material.angularjs.org
19. Angular Material UI Component framework for web, mobile and desktop Fast and Consistent Versatile Optimized for Angular
20. Form controls
21. Tabs & Paginator
22. Menu & Chips
23. Expansion Panel
24. Autocomplete
25. More @ material.angular.io/components
26. Flex Layout
27. Why! Pure-Typescript UI Layout engine No external stylesheets Independent of Angular Material (v1 or v2) Only available for Angular (v2.x or higher) Applications Support (future) for Handset/Tablet and Orientation breakpoints
28. Setup
29. Existing angular app npm install --save @angular/material @angular/cdk * Angular Material and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support
30. Starting from scratch npm install -g @angular/cli * Angular CLI ng new material-demo Create an Angular App ng serve Run an Angular App speakerdeck.com/hardikpthv/rise-with-angular
31. Material dependencies npm install --save @angular/material @angular/cdk * Angular Material and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support
32. Flex layout dependency npm install --save @angular/flex-layout * Angular Flex Layout
33. Import modules import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MatButtonModule, MatCheckboxModule], ... }) export class TutorialAppModule { } * Import the NgModule Note : Create a separate NgModule that imports all of the Material components that you will use in your application.
34. Import modules import {FlexLayoutModule} from '@angular/flex-layout; @NgModule({ ... imports: [FlexLayoutModule], ... }) export class AppModule { } * Import the NgModule to support flex layout
35. Theming @import "~@angular/material/prebuilt-themes/indigo-pink.css"; style.css Available themes : deeppurple-amber, indigo-pink, pink-bluegrey, and purple-green <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Add icons in your app
36. Demo <>
37. View @ online-edu.github.io/devfest
38. Download @ bit.ly/ng-material-vscode
39. Thank You Hardik Pithva @hardikpthv @GDGPune @GoogleDevIndia
40. Get the content and stay tuned • Presentation : onlineedu.in/devfest-pune-17 • Slides : goo.gl/pgXLJg • Repo. : github.com/online-edu/devfest • Tutorials : youtube.com/onlineedu • VS Code Snippets for Material : bit.ly/ng-material-vscode