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

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

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

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 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:

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’;

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="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 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:

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
Routing in Angular