|
| 1 | +Angular Material comes packaged with Angular CLI schematics to make |
| 2 | +creating Material applications easier. |
| 3 | + |
| 4 | +## Install Schematics |
| 5 | +Schematics come packaged with Angular Material, so once you have |
| 6 | +installed the npm package, they will be available via the Angular CLI. |
| 7 | + |
| 8 | +If you run it will automatically install Angular Material for you |
| 9 | +and run the shell schematic. |
| 10 | + |
| 11 | +``` |
| 12 | +ng add @angular/material |
| 13 | +``` |
| 14 | + |
| 15 | +## Packaged Schematics |
| 16 | +Angular Material has 4 schematics it comes packaged with: |
| 17 | + |
| 18 | +- Material Shell |
| 19 | +- Navigation |
| 20 | +- Dashboard |
| 21 | +- Table |
| 22 | + |
| 23 | +### Shell Schematic |
| 24 | +The shell schematic will help you quickly add Material to a new project. |
| 25 | +This schematic will: |
| 26 | + |
| 27 | +- Ensure project depedencies in `package.json` |
| 28 | +- Ensure project depedencies in your app module |
| 29 | +- Adds Prebuilt or Setup Custom Theme |
| 30 | +- Adds Roboto fonts to your index.html |
| 31 | +- Apply simple CSS reset to body |
| 32 | + |
| 33 | +``` |
| 34 | +ng add @angular/material |
| 35 | +``` |
| 36 | + |
| 37 | +### Navigation Schematic |
| 38 | +The navigation schematic will create a new component that includes |
| 39 | +a toolbar with the app name and the side nav responsive based on Material |
| 40 | +breakpoints. |
| 41 | + |
| 42 | +``` |
| 43 | +ng generate @angular/material:material-nav |
| 44 | +``` |
| 45 | + |
| 46 | +### Dashboard Schematic |
| 47 | +The dashboard schematic will create a new component that contains |
| 48 | +a dynamic grid list of cards. |
| 49 | + |
| 50 | +``` |
| 51 | +ng generate @angular/material:material-dashboard |
| 52 | +``` |
| 53 | + |
| 54 | +### Table Schematic |
| 55 | +The table schematic will create a new table component pre-configured |
| 56 | +with a datasource for sorting and pagination. |
| 57 | + |
| 58 | +``` |
| 59 | +ng generate @angular/material:material-table |
| 60 | +``` |
0 commit comments