Skip to main content

​
Overview

Angular Material comes with built-in schematics that help you quickly generate pre-configured components using the Angular CLI. These schematics create production-ready components with Material Design best practices already implemented.
Schematics are included with both @angular/material and @angular/cdk. Once installed, they’re available through the Angular CLI.

​
Installation Schematic

The easiest way to add Angular Material to your project is using the ng add schematic: 
ng add @angular/material
This schematic will:
1

Install Dependencies

Adds @angular/material, @angular/cdk, and @angular/animations to your package.json
2

Configure Theme

Prompts you to select a prebuilt theme or set up a custom theme
3

Add Typography

Asks whether to apply global Material Design typography styles
4

Include Fonts

Adds Roboto font and Material Icons to your index.html
5

Set Global Styles

Configures global CSS for proper Material component display
For CDK only: 
ng add @angular/cdk

​
Component Schematics

Angular Material provides several component schematics to quickly generate common UI patterns: Generates a component with a responsive Material sidenav and toolbar: 
ng generate @angular/material:navigation <component-name>
What it creates:
  • Responsive side navigation using <mat-sidenav>
  • App toolbar with menu button using <mat-toolbar>
  • Breakpoint detection for mobile/desktop layouts
  • Navigation links in the sidenav
ng generate @angular/material:navigation main-nav

​
Table Schematic

Generates a component with a Material data table configured for sorting and pagination: 
ng generate @angular/material:table <component-name>
What it creates:
  • <mat-table> with column definitions
  • MatTableDataSource for data management
  • mat-sort for sortable columns
  • mat-paginator for pagination
  • Sample data structure
ng generate @angular/material:table user-table

​
Dashboard Schematic

Generates a component with a responsive grid dashboard layout: 
ng generate @angular/material:dashboard <component-name>
What it creates:
  • Responsive grid layout using CSS Grid
  • Multiple <mat-card> components
  • Card headers and content areas
  • Responsive breakpoint handling
ng generate @angular/material:dashboard analytics-dashboard

​
Address Form Schematic

Generates a component with a form using Material form controls: 
ng generate @angular/material:address-form <component-name>
What it creates:
  • Reactive form with form validation
  • Material form fields (<mat-form-field>)
  • Material input controls
  • Material radio buttons
  • Material select dropdowns
  • Submit button with Material styling
ng generate @angular/material:address-form shipping-form

​
Tree Schematic

Generates a component that visualizes nested data using <mat-tree>: 
ng generate @angular/material:tree <component-name>
What it creates:
  • <mat-tree> component with nested nodes
  • Expandable/collapsible tree structure
  • Material icons for expand/collapse
  • Sample hierarchical data structure
ng generate @angular/material:tree file-tree

​
CDK Schematics

The Angular CDK also provides schematics:

​
Drag and Drop Schematic

Generates a component using CDK drag-drop directives: 
ng generate @angular/cdk:drag-drop <component-name>
What it creates:
  • Interactive drag-and-drop list
  • cdkDropList and cdkDrag directives
  • Drop event handling
  • Sample to-do list structure
ng generate @angular/cdk:drag-drop todo-list

​
Theme Color Schematic

Generates Material 3 color palettes from custom colors: 
ng generate @angular/material:theme-color
This schematic will:
1

Prompt for Colors

Asks for primary, secondary, tertiary, and neutral color values
2

Generate Palette File

Creates a file with complete Material 3 color palettes
3

Optional High Contrast

Can generate high contrast override mixins
4

Integration Ready

Palette file can be imported and used in your theme
Learn more in the theme-color schematic documentation.

​
Using Generated Components

After generating a component, you can use it in your application:
1

Import the Component

Import the generated component in your routes or parent component:
app.routes.ts
import { Routes } from '@angular/router';
import { MainNavComponent } from './main-nav/main-nav.component';
import { UserTableComponent } from './user-table/user-table.component';

export const routes: Routes = [
  { path: '', component: MainNavComponent },
  { path: 'users', component: UserTableComponent },
];
2

Customize the Component

Modify the generated code to fit your needs:
  • Update data sources
  • Add your business logic
  • Adjust styling
  • Modify templates
3

Style the Component

The generated components include basic styles. Enhance them:
component.scss
.dashboard-card {
  margin: 16px;
  
  mat-card-header {
    background: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
  }
}

​
Schematic Options

Many schematics accept additional options:
​
--project
string
The project to generate the component in (for multi-project workspaces)
​
--path
string
The path to create the component in
​
--module
string
The module to import the component into (for NgModule-based apps)
​
--export
boolean
default:"false"
Whether to export the component from the module
​
--skip-import
boolean
default:"false"
Whether to skip importing the component into a module

​
Example with Options

ng generate @angular/material:table user-table \
  --project=admin-app \
  --path=src/app/features/users \
  --export

​
Best Practices

Use schematics as a starting point, then customize:
  • Schematics provide best-practice patterns
  • They include proper imports and setup
  • Modify generated code to match your needs
  • Learn Material patterns from the generated code
Keep your project organized:
# Generate in feature folders
ng generate @angular/material:table src/app/features/users/user-list
ng generate @angular/material:dashboard src/app/features/analytics/dashboard
Always review and understand the generated code:
  • Check imports and dependencies
  • Understand the data flow
  • Review accessibility features
  • Customize for your use case
Use multiple schematics together:
# Create a full admin interface
ng generate @angular/material:navigation admin-shell
ng generate @angular/material:table admin-shell/user-table
ng generate @angular/material:dashboard admin-shell/dashboard

​
Example: Building a Complete Feature

Here’s how to use schematics to build a complete user management feature:
1

Generate Navigation

ng generate @angular/material:navigation app-shell
2

Generate User Table

ng generate @angular/material:table users/user-list
3

Generate User Form

ng generate @angular/material:address-form users/user-form
4

Connect Components

Update the navigation to link to your new components:
app-shell.component.html
<mat-sidenav-container>
  <mat-sidenav #drawer mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink="/users">Users</a>
      <a mat-list-item routerLink="/dashboard">Dashboard</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

​
Resources

Angular Schematics

Learn about Angular schematics

Theme Color Schematic

Custom palette generation guide

Component Examples

See live examples of components

Quick Start

Build your first Material app

​
Next Steps

Theming

Customize your generated components

Components

Explore all Material components

Accessibility

Ensure your components are accessible

Build docs developers (and LLMs) love

Get started for freeTalk to us