How to install angular material in Angular Application

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