Skip to content

Commit 1994ff3

Browse files
committed
docs: list all available schematics in the schematics guide
* Updates the outdated `schematics` guide to mention the new available component schematics.
1 parent 2e4a511 commit 1994ff3

File tree

1 file changed

+65
-21
lines changed

1 file changed

+65
-21
lines changed

guides/schematics.md

Lines changed: 65 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,48 +13,92 @@ install schematic.
1313
ng add @angular/material
1414
```
1515

16-
The install schematic will help you add Material to a new project.
17-
This schematic will:
16+
In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.io/cdk)
17+
18+
```
19+
ng add @angular/cdk
20+
```
21+
22+
The Angular Material `ng add` schematic helps you setup an Angular CLI project that uses Material. Running `ng add` will:
1823

1924
- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
2025
- Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) your app module
2126
- Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme)
22-
- Add Roboto fonts to your index.html
23-
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your index.html
27+
- Add Roboto fonts to your `index.html`
28+
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html`
2429
- Add global styles to
2530
- Remove margins from `body`
2631
- Set `height: 100%` on `html` and `body`
2732
- Make Roboto the default font of your app
28-
- Install and import `hammerjs` for [touch gesture support](./getting-started#step-5-gesture-support) in your project
33+
- Install and import `hammerjs` for [gesture support](./getting-started#step-5-gesture-support) in your project
34+
35+
36+
## Component schematics
37+
In addition to the install schematic, Angular Material comes with multiple schematics that can be
38+
used to easily generate Material Design components:
39+
40+
- [Address form](#address-form-schematic)
41+
- [Dashboard](#dashboard-schematic)
42+
- [Navigation](#navigation-schematic)
43+
- [Table](#table-schematic)
44+
- [Tree](#tree-schematic)
45+
46+
47+
Additionally the Angular CDK also comes with a collection of component schematics:
48+
49+
* [Drag and Drop](#drag-and-drop-schematic)
50+
51+
52+
#### Address form schematic
2953

30-
## Generator Schematics
31-
In addition to the install schematic, Angular Material has three schematics it comes packaged with:
54+
Running the `address-form` schematic generates a new Angular component that can be used to get
55+
started with a Material Design form group consisting of:
3256

33-
- Navigation
34-
- Dashboard
35-
- Table
57+
* Material Design form fields
58+
* Material Design radio controls
59+
* Material Design buttons
3660

37-
### Navigation Schematic
38-
The navigation schematic will create a new component that includes
61+
```
62+
ng generate @angular/material:address-form <component-name>
63+
```
64+
65+
#### Navigation schematic
66+
The `navigation` schematic will create a new component that includes
3967
a toolbar with the app name and a responsive side nav based on Material
4068
breakpoints.
4169

4270
```
43-
ng generate @angular/material:material-nav --name <component-name>
71+
ng generate @angular/material:nav <component-name>
72+
```
73+
74+
#### Table schematic
75+
The table schematic will create a component that renders an Angular Material `<table>` which has
76+
been pre-configured with a datasource for sorting and pagination.
77+
78+
```
79+
ng generate @angular/material:table <component-name>
80+
```
81+
82+
#### Dashboard schematic
83+
The `dashboard` schematic will create a new component that contains
84+
a dynamic grid list of Material Design cards.
85+
86+
```
87+
ng generate @angular/material:dashboard <component-name>
4488
```
4589

46-
### Dashboard Schematic
47-
The dashboard schematic will create a new component that contains
48-
a dynamic grid list of cards.
90+
#### Tree schematic
91+
The `tree` schematic can be used to quickly generate an Angular component that uses the Angular
92+
Material `<mat-tree>` component to visualize a nested folder structure.
4993

5094
```
51-
ng generate @angular/material:material-dashboard --name <component-name>
95+
ng generate @angular/material:tree <component-name>
5296
```
5397

54-
### Table Schematic
55-
The table schematic will create a new table component pre-configured
56-
with a datasource for sorting and pagination.
98+
#### Drag and Drop schematic
99+
The `drag-drop` schematic is provided by the `@angular/cdk` and can be used to generate a component
100+
that uses the CDK drag and drop directives.
57101

58102
```
59-
ng generate @angular/material:material-table --name <component-name>
103+
ng generate @angular/cdk:drag-drop <component-name>
60104
```

0 commit comments

Comments
 (0)