Getting started with angular material 8 with angular 8

Introduction to Angular-material:

Features of angular material:

  • Fast and consistent: It has a great performance. It is fully tested across modern browsers.
  • Versatile: It is themable. When you want to design based on your choice, you can apply your favorite color.
  • Optimized for angular: All users can use or adapt it as it is accessible and internationalized.

Here’s how you can get started with installing angular material in angular project.

Step 1: Install npm packages of angular-material, angular-animations, angular-cdk

Install npm packages like angular-material, angular-animations, angular-cdk at once by this command:

>> npm install –save @angular/material @angular/cdk @angular/animations

installing necessary angular material npm packages

Step 2: Install Hammer.js npm package for Gesture Support

Some components like mat-slide-toggle, mat-slider, matTooltip rely on HammerJS for gestures. To use the full features of these components, HammerJS must be installed into your application.
Install it by the following command:

>> npm install –save hammerjs

installing hammer js

After installing it import it into application entry point(eg. src/main.ts)
import ‘hammerjs’;

importing hammer js

Step 3: Create a material module

You have to create a global material module in your project. From that module, you can import and export various components that angular-material has to offer. You can import only those components that your project requires.
Create a material.module.ts file and insert the following code:

import { NgModule } from '@angular/core';

import {
} from '@angular/material';

  imports: [
  exports: [
export class MaterialModule { }

Step 4: Add angular material module into the app module file

You need to import the material module and include it into the imports array. You also need to import BrowserAnimationsModule and include it into the imports array. BrowserAnimationsModule helps to use angular animations in your project.
Your app.module.ts file will be somewhat similar to this:

importing material module in app module

Step 5: Import theme

A theme is the set of colors that will be applied to the Angular Material components. Adding a theme is required to apply all of the core and theme styles to your application. You can add a theme file into your application from @angular/material/prebuilt-themes.

Angular material offers some themes like:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

Import the following theme directly into your styles.css file.
@import ‘@angular/material/prebuilt-themes/pink-bluegrey.css’;

importing angular-material theme

Step 6: Add Material Icons

You can use the mat-icon component from Material Design Icons. Add the following link tag into the index.html file.

<link rel="stylesheet" href="">

Step 7: Using angular material

Installation of angular material is completed. You can start using it by including templates like below in your HTML file.

Include the following HTML code into the app.component.html file:

  <mat-toolbar color="primary">

    <button mat-icon-button [mat-menu-trigger-for]="menu">
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>

      Welcome to Angular material.
    <button mat-flat-button color="primary">

Add the following CSS to the global styles.css file

html {
  font-family: Roboto, sans-serif, Helvetica;

body {
  margin: 0px;

mat-card {
  max-width: 85%;
  margin: 2em auto;
  text-align: center;

.mat-toolbar {
  justify-content: space-between;

mat-icon {
  vertical-align: middle;

Step 8: Run and open your application in a browser

Your application is ready. Run it and open it into a browser. Here is the UI of the application:

angular-material application user interface


Learn different components like toolbar, menu, cards, buttons, icons, progress spinner, progress bar, snackbar, etc and how to implement them by this angular material tutorial

See also:

How to install TinyMCE in Angular
Components in angular
Services in angular
Routing in Angular

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Vikrant Chavan
Vikrant Chavan
3 years ago

Great post.

bluestacks 4 mobile legends controls
bluestacks 4 mobile legends controls
3 years ago

Hi! I’m at work browsing your blog from my new
iphone 4! Just wanted to say I love reading through your blog and look forward to all your
posts! Keep up the fantastic work!

3M N95 9542v
3M N95 9542v
2 years ago

This is a useful article. By studying this, I can enrich my knowledge.
Your idea is actually outstanding. Thank’s toshare withe us such an important matter.

King regards,
Thomassen Dencker

Kemberly Tenzer
Kemberly Tenzer
2 years ago

Hello! I’ve been reading your website for some time now and finally got the bravery to go ahead and give you a shout out from Austin Texas! Just wanted to tell you keep up the great job!

2 years ago

Simply want to say your article is as astonishing. The clearness in your post is simply great and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please continue the gratifying work.