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

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