Skip to content

Commit f4b0ea3

Browse files
amcdnljelbourn
authored andcommitted
docs: add schematics guide (#10502)
1 parent a582dd2 commit f4b0ea3

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

guides/schematics.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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

Comments
 (0)