Skip to content

docs: schematics #10502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 6, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions guides/schematics.md
Original file line number Diff line number Diff line change
@@ -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
```