docs: show all available schematics in the schematics guide (#13520)

* docs: show all available schematics in the schematics guide

* Updates the outdated `schematics` guide to mention the new available component schematics.

* Address feedback

Author: devversion

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 `<mat-tree>` 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 <component-name>
+```
+
+#### 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 <component-name>
+ng generate @angular/material:nav <component-name>
+```
+
+#### Table schematic
+The table schematic will create a component that renders an Angular Material `<table>` which has
+been pre-configured with a datasource for sorting and pagination.
+
+```
+ng generate @angular/material:table <component-name>
+```
+
+#### 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 <component-name>
 ```
 
-### 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 `<mat-tree>` component to visualize a nested folder structure.
 
 ```
-ng generate @angular/material:material-dashboard --name <component-name>
+ng generate @angular/material:tree <component-name>
 ```
 
-### 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 <component-name>
+ng generate @angular/cdk:drag-drop <component-name>
 ```