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

@NgModule({
  imports: [
    MatToolbarModule,
    MatMenuModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule
  ],
  exports: [
    MatToolbarModule,
    MatMenuModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule
  ]
})
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 imports array. You also need to import BrowserAnimationsModule and include it into imports array. BrowserAnimationsModule helps to use angular animations into 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 mat-icon component from Material Design Icons. Add the following link tag into the index.html file.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

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:

<div>
  <mat-toolbar color="primary">
    <span>DevConquer</span>

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

  <mat-card>
    <h2>
      Welcome to Angular material.
    </h2>
    <button mat-flat-button color="primary">
      <span>
        <mat-icon>mood</mat-icon>
      </span>
      Ok
    </button>
  </mat-card>
</div>

Add the following CSS to 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 UI of the application:

angular-material application user interface

References:

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

3 Comments

  1. 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!

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *