In this article, we’ll see how to install Angular Material in Angular application and we’ll also see an example by displaying one of the angular components in our application.
But before that if you don’t know what is Angular material then we’ll take a look into little bit and if you know then you can skip the first part.
Table of Contents
What is Angular Material
Angular Material is UI component library and material design components for Mobile and Web based Angular Application. It helps to create attractive, consistent and responsive website. Angular Material is inspired by Google Material Desing.
Now we’ll see how to install angular material in Angular application
Install Angular CLI
Run the following command to install angular cli.
npm install -g @angular/cli
Create Angular Project
Run the following command to create angular workspace.
ng new angular-material-demo
and then you’ll be asked to choose the stylesheet format, Select the format of your choice and hit enter.
Then Angular CLI will create necessary file and folders and will install the necessary npm packages.
Navigate to project directory
cd angular-material-demo
Installing Angular Material
From v6 onwards, Angular Material comes packaged with Angular CLI schematics to make creating Material applications easier.
According to Angular.io
“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.”
Install Schematics
Now run the following command
ng add @angular/material
This command will install Angular Material, Component Development Toolkit(CDK) and Angular Animation. and then it’ll run install schematics.
If you’ll run the above command it’ll ask you to choose the angular material theme, Choose a prebuilt theme name, or “custom” for a custom theme.
For this article I’m selecting Indigo/Pink theme and then hit enter.

Then it’ll ask you couple of more questions as following:
- Set up global Angular Material typography styles?
- Set up browser animations for Angular Material?
Select Y(Yes) for both and hit enter.
Importing the BrowserAnimationsModule
into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Then it’ll update following files.
app.module.ts
: It’ll add BrowserAnimationsModule
angular.json
: It’ll include indigo-pink theme style path to style array.
index.html
: It’ll add Roboto fonts and Material design icon font.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
style.css
: Will add some global css styles.
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
package.json
: Will add few dependencies. i.e @angular/cdk, @angular/material etc.
You’ve finally Angular material in your application. Now it’s time to use angular material component in your application.
Using Angular Material Component
Now we’ll see how to show angular Material checkbox and radio button and card component in application.
We’ll show simple for to take the input like hobby and gender.
Since we’re using checkbox, radio button and card, we’ll need to import the modules for all of these components as following in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioModule } from '@angular/material/radio';
import { MatCardModule } from '@angular/material/card';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatRadioModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Now copy the following code into your component file
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
cricket = true;
football = true;
gender: 'M' | 'F' = 'M';
}
and template file will look like the following
app.component.html
<mat-card>
<mat-card-content>
<h2 class="example-h2">Checkbox Example</h2>
<section class="example-section">
<mat-checkbox class="example-margin" [(ngModel)]="cricket">Cricket</mat-checkbox>
<mat-checkbox class="example-margin" [(ngModel)]="football">Football</mat-checkbox>
</section>
<section class="example-section">
<label class="example-margin">Gender:</label>
<mat-radio-group [(ngModel)]="gender">
<mat-radio-button class="example-margin" value="M">Male</mat-radio-button>
<mat-radio-button class="example-margin" value="F">Female</mat-radio-button>
</mat-radio-group>
</section>
</mat-card-content>
</mat-card>
app.component.css
.example-h2 {
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 0 10px;
}
Output
If you’ll run the application using ng serve
. it’ll display the following output.

General Error
Sometime you’ll get this error while running the project after angular material is installed.
ERROR in node_modules/@angular/cdk/coercion/array.d.ts(10,60): error TS1005: ',' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,61): error TS1005: ',' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,75): error TS1144: '{' or ';' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,77): error TS1011: An element access expression should take an argument.
This error often occurs when you’ve a different version of Angular Material and Angular Core package. i.e material(9.x), core(7x.x) and cdk(9.x).
So you’ll need to upgrade your angular core version to angular 9. see this article to upgrade angular project
Also Read
- How to use Angular APP_INITIALIZER token
- How to use environment variable in Angular application
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application
- How to define global constants(variables) in angular