This guide explains how to set up your Angular project to begin using Angular Material. It includes information on prerequisites, installing Angular Material, and optionally displaying a sample Material component in your application to verify your setup.
This guide assumes that the Angular CLI has already been installed.
Add Angular Material to your application by running the following command:
ng add @angular/material
The ng add
command will install Angular Material, the
Component Dev Kit (CDK),
Angular Animations and ask you the following questions to
determine which features to include:
Choose a prebuilt theme name, or "custom" for a custom theme:
You can choose from prebuilt material design themes or set up an extensible custom theme.
Set up global Angular Material typography styles:
Whether to apply the global typography styles to your application.
Set up browser animations for Angular Material:
Importing the BrowserAnimationsModule
into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.
The ng add
command will additionally perform the following actions:
package.json
index.html
index.html
body
height: 100%
on html
and body
You're done! Angular Material is now configured to be used in your application.
Let's display a slide toggle component in your app and verify that everything works.
You need to import the MatSlideToggleModule
that you want to display by adding the following lines to
your standalone component's imports, or otherwise your component's NgModule
.
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@Component ({
imports: [
MatSlideToggleModule,
]
})
class AppComponent {}
Add the <mat-slide-toggle>
tag to the app.component.html
like so:
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
Run your local dev server:
ng serve
Then point your browser to http://localhost:4200
You should see the Material slide toggle component on the page.
In addition to the installation schematic, Angular Material comes with several other schematics (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.