Angular 7 Material Schematics

Go back to Tutorial

Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project.

Schematics come packaged with Angular Material, so once you have installed the npm package, they will be available via the Angular CLI.

In a schematic, you don’t actually perform any direct actions on the filesystem. Rather, you describe what transformation you would like to apply to a Tree. This allows us to support features like dry runs (or patch runs) without adding special support from the schematics themselves. It also makes schematics hermetic which ensures reusability and safety.

The Tree is a data structure that contains a base (a set of files that already exists) and a staging area (a list of changes to be applied to the base). When making modifications, you don’t actually change the base, but add those modifications to the staging area. This is really powerful but can be tricky and will be further explored in a separate medium post.

The Tree that a schematic will receive can be anything. The Angular CLI will use a Tree representing the project on the drive to the first schematic it calls, but composed schematics could receive any Trees. The good news is that it doesn’t matter; the Tree represents your starting point.

Angular Material comes packaged with Angular CLI schematics to make creating Material applications easier.

Install Schematics

Schematics are included with both @angular/cdk and @angular/material. Once you install the npm packages, they will be available through the Angular CLI. Using the command below will install Angular Material, the Component Dev Kit (CDK), and Angular Animations in your project. Then it will run the install schematic.

ng add @angular/material

In case you just want to install @angular/cdk, there are also schematics for the Component Dev Kit

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 are placed in package.json
• Enable the BrowserAnimationsModule your app module
• Add either a prebuilt theme or a custom theme
• Add Roboto fonts to your index.html
• Add the Material Icon font 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 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

Address form schematic

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:

• 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: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>

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:tree <component-name>

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/cdk:drag-drop <component-name>

Go back to Tutorial