diff --git a/guides/schematics.md b/guides/schematics.md index 5cbccf5a14d8..e930c86951d3 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -13,48 +13,97 @@ install schematic. ng add @angular/material ``` -The install schematic will help you add Material to a new project. -This schematic will: +In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.io/cdk) + +``` +ng add @angular/cdk +``` + +The Angular Material `ng add` schematic helps you setup an Angular CLI project that uses Material. Running `ng add` will: - Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json` - Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) your app module - Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme) -- Add Roboto fonts to your index.html -- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your index.html +- Add Roboto fonts to your `index.html` +- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html` - Add global styles to - Remove margins from `body` - Set `height: 100%` on `html` and `body` - Make Roboto the default font of your app -- Install and import `hammerjs` for [touch gesture support](./getting-started#step-5-gesture-support) in your project +- Install and import `hammerjs` for [gesture support](./getting-started#step-5-gesture-support) in your project + + +## Component schematics +In addition to the install schematic, Angular Material comes with multiple schematics that can be +used to easily generate Material Design components: + + +| Name | Description | +|----------------|--------------------------------------------------------------------------------------------------------| +| `address-form` | Component with a form group that uses Material Design form controls to prompt for a shipping address | +| `navigation` | Creates a component with a responsive Material Design sidenav and a toolbar for showing the app name | +| `dashboard` | Component with multiple Material Design cards and menus which are aligned in a grid layout | +| `table` | Generates a component with a Material Design data table that supports sorting and pagination | +| `tree` | Component that interactively visualizes a nested folder structure by using the `` component | + + +Additionally the Angular CDK also comes with a collection of component schematics: + + +| Name | Description | +|----------------|----------------------------------------------------------------------------------------------------| +| `drag-drop` | Component that uses the `@angular/cdk/drag-drop` directives for creating an interactive to-do list | -## Generator Schematics -In addition to the install schematic, Angular Material has three schematics it comes packaged with: +#### Address form schematic -- Navigation -- Dashboard -- Table +Running the `address-form` schematic generates a new Angular component that can be used to get +started with a Material Design form group consisting of: -### Navigation Schematic -The navigation schematic will create a new component that includes +* Material Design form fields +* Material Design radio controls +* Material Design buttons + +``` +ng generate @angular/material:address-form +``` + +#### Navigation schematic +The `navigation` schematic will create a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints. ``` -ng generate @angular/material:material-nav --name +ng generate @angular/material:nav +``` + +#### Table schematic +The table schematic will create a component that renders an Angular Material `` which has +been pre-configured with a datasource for sorting and pagination. + +``` +ng generate @angular/material:table +``` + +#### Dashboard schematic +The `dashboard` schematic will create a new component that contains +a dynamic grid list of Material Design cards. + +``` +ng generate @angular/material:dashboard ``` -### Dashboard Schematic -The dashboard schematic will create a new component that contains -a dynamic grid list of cards. +#### Tree schematic +The `tree` schematic can be used to quickly generate an Angular component that uses the Angular +Material `` component to visualize a nested folder structure. ``` -ng generate @angular/material:material-dashboard --name +ng generate @angular/material:tree ``` -### Table Schematic -The table schematic will create a new table component pre-configured -with a datasource for sorting and pagination. +#### Drag and Drop schematic +The `drag-drop` schematic is provided by the `@angular/cdk` and can be used to generate a component +that uses the CDK drag and drop directives. ``` -ng generate @angular/material:material-table --name +ng generate @angular/cdk:drag-drop ```