@@ -13,48 +13,92 @@ install schematic.
1313ng 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
3967a toolbar with the app name and a responsive side nav based on Material
4068breakpoints.
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