Material & Schematics

Slides del Meetup Angular México

Transcript

1. Material & Schematics
2. Uriel Miranda @nekrorockwell
3. What is Angular Material?
4. Material Design components for Angular
5. Material Design?? Components?
6. Is a visual language that synthesizes the classic principles of good design with the innovation of technology and science Material Design
7. Material Design
8. Material Design
9. Material
10. Material https://material.angular.io/
11. Generate New Project - ng new <projecName> Add angular Material - ng add @angular/material Add Theme to main css @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; Material
12. Add Nav Bar ng generate @angular/material:material-nav —name=main-nav Add Table ng generate @angular/material:material-table —name=table Add Dashboard ng generate @angular/material:material-dashboard --name=dashboard Material-Schematics
13. DEMO TIME
14. Schematics
15. “Schematics is a workflow tool for the modern web, it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency.” Schematic
16. Schematic is a “recipe” which can be executed to generate and adjust project files with: ng generate <schematic-name> @tomastrajan Schematic
17. schematics collection 
18. is a project ( npm package ) which contains at least one schematic Schematics
19. Install Devkit $ npm install -g @angular-devkit/schematics-cli Create blank schematic $ schematics blank —name=<name> $cd to/path/of/new/schematic Install Schematics $ npm install @schematic/angular Schematics
20. Get The Shit Done
21. $ cd to/some/location $ ng new <name-of-project> #New angular proyect $ cd <name-of-proyect> $ npm link ./path/to/schematic/<schematic-name> 
 $ ng g <schematic-name>:<schematic-name> --name="some name” Schematics Finals Steps
22. We did it
23. https://goo.gl/jmYUqD References https://material.io/ https://material.angular.io/ @nekrorockwell
24. Thank You!