Angular + Material | How to Install Angular Material in Angular Project

In this tutorial, we will go through quick steps to Install Angular Material in Angular project and also discuss how to add themes and different Material Components in an Angular project.

Angular Material is a UI framework based on Material concepts of designs. It is a mobile-first framework properly built for Angular. The material provides a number of easy to add and use flexible UI web components, which works mailing on different device screen sizes.

To start the Material installation, first, we will create a new Angular project using Ng CLI tool using Command prompt terminal.

Make sure you have NodeJS installed to use NPM which Node Package Manager used to install packages directly from the terminal.

Install Ng CLI

Angular/NG CLI tool makes Angular development very easy by providing easy commands to generate services, components, directive, etc.

Run following CMD command to install CLI tool

$ npm install -g @angular/cli

Create a new Angular Project

As now we have NG CLI tool install, we can easily create a new Angular project by running following command in CLI

$ ng new HeyAngularMaterial

After running above command it will ask if you want Routing in the project? and also about CSS style formats you want to opt for the project.

Install Angular Material

To install Angular Material in Angular project run following npm CLI command to install Material, CDK and Animation packages.

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

Enable Animation for Material Components

Animations like smooth scrolling effect, ripple effect on button click need to be enabled or disabled by importing following modules.

In the app.module.ts file make the following changes:

Enable Animations:

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

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

Disable Animations:

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

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

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
/* @import "~@angular/material/prebuilt-themes/pink-bluegrey.css"; */
/* @import "~@angular/material/prebuilt-themes/purple-green.css"; */

you can use any one of these available themes.

That’s it … we are done with Angular material configuration.

How to use Material Components?

To use an Angular Material component like buttons, autocomplete, tabs, etc, first you need to add their modules in your project’s app.module.ts file. So that they will be available to every component under that module.

For example, if you want to use Material Buttons, import MatButtonModule then add in the imports array.

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    MatButtonModule
  ],
  entryComponents: [
    DialogModalExampleComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }