From f4b0ea34984f109a9473b8b22322cce82f346fe2 Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 6 Apr 2018 00:24:16 -0500 Subject: [PATCH] docs: add schematics guide (#10502) --- guides/schematics.md | 60 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 guides/schematics.md diff --git a/guides/schematics.md b/guides/schematics.md new file mode 100644 index 00000000000..09a3aa0da54 --- /dev/null +++ b/guides/schematics.md @@ -0,0 +1,60 @@ +Angular Material comes packaged with Angular CLI schematics to make +creating Material applications easier. + +## Install Schematics +Schematics come packaged with Angular Material, so once you have +installed the npm package, they will be available via the Angular CLI. + +If you run it will automatically install Angular Material for you +and run the shell schematic. + +``` +ng add @angular/material +``` + +## Packaged Schematics +Angular Material has 4 schematics it comes packaged with: + +- Material Shell +- Navigation +- Dashboard +- Table + +### Shell Schematic +The shell schematic will help you quickly add Material to a new project. +This schematic will: + +- Ensure project depedencies in `package.json` +- Ensure project depedencies in your app module +- Adds Prebuilt or Setup Custom Theme +- Adds Roboto fonts to your index.html +- Apply simple CSS reset to body + +``` +ng add @angular/material +``` + +### Navigation Schematic +The navigation schematic will create a new component that includes +a toolbar with the app name and the side nav responsive based on Material +breakpoints. + +``` +ng generate @angular/material:material-nav +``` + +### Dashboard Schematic +The dashboard schematic will create a new component that contains +a dynamic grid list of cards. + +``` +ng generate @angular/material:material-dashboard +``` + +### Table Schematic +The table schematic will create a new table component pre-configured +with a datasource for sorting and pagination. + +``` +ng generate @angular/material:material-table +```