How to Install Angular Material in Angular 9|8|7|6

In this tutorial, we are going to see step by step process on how to Install Angular Material in an Angular project. We will also learn how to add material themes, animations and different components in an Angular project.

What is Angular Material

So, What is Angular Material?

Angular Material is a UI framework that is purely built for Angular. It has different UI web-based components that give you the flexibility to create pages for any devices like mobile, iPad desktop, etc.

Using Angular Material is really easy in any Angular project. You will surely love it.

So let’s start creating a new Angular project from scratch to install Angular Material in it.

Before we start, make sure you have NodeJs installed on your computer so that we could use NPM (originally short for Node Package Manager) to install all necessary packages direct from the terminal.

If not installed, you can install it using the below link:

How to install NodeJs?

Create a New Angular Project

To create a new Angular project, run the following command in your terminal given below:

ng new angular-material-project
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS    (.css )

create angular material project

The ng new angular-material-project command will ask for routing configuration and the stylesheet format for your project.

Here I have selected the routing to Yes and the stylesheet format is .css

This will enable routing and add a routing file in the project. Also, we can use CSS files for UI customization as we have chosen .css.

Install Angular Material, Angular CDK and Angular Animations

We’ll install the Angular Material, Angular CDK, and the Angular Animation package by using the npm command. So let’s open the terminal and run the command as shown below.

npm install @angular/material @angular/cdk @angular/animations --save

Now, Using the Angular CLI ng add command we will update our Angular project with the correct dependencies.

ng add @angular/material

If you are using Linux or macOS and getting any permission denied error during installation then try using sudo as a prefix.

sudo ng add @angular/material

Add Angular Material Theme

Angular Material comes with 4 pre-built themes, you can use in your project.

During the installation process, it will ask to choose a pre-built theme. There is also an option to choose “Custom” if you want to create your own theme in your project.

Angular Material Theme

Enable Animation for Angular Material Components

To enable animation for material components you just need to make the following changes in your app.module.ts file.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

By using the above code you will be able to use different types of animations in your project eg. – ripple effect on button click, smooth scrolling, Transition & Triggers, etc.

Same way, you can also disable animation in an Angular project, if you don’t want using the below code.

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

Use Material Components in Angular Project

To use Angular Material Component like button, checkbox, radio button, date picker, form fields, etc, then very first you need to add their modules in the app.module.ts or in the child modules file.

For example, If you want to use Button Component, then you will have to import its component that is MatButtonModule and add it into the import array.

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 { MatButtonModule } from '@angular/material';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

Finally, we have successfully installed the Angular Material in an Angular project. If you follow all the steps carefully, you will be able to make it done.

If you want to ask anything regarding Angular Material Installation, feel free to ask below in the comment section.

Leave a Reply