Angular 5 App With Angular Material 2 : Step By Step Tutorial

In this tutorial we will walk through the process of setting up the Angular Material 2 for our Angular 5 project.

Angular Material 2 is a set of Material design components brought to Angular 2+ apps. The project aims to build a full array of components to help and speed up the process of creating Material Design interfaces.

Note: This article depends on Angular 4+

In this tutorial we will walk through the process of setting up the Angular Material 2 for our Angular 5 project. So let's see how we will do it.

1. Install angular-material and hammerjs

Start by installing Angular Material, Angular animations, and Hammer.js using the following commands:

$ npm install --save @angular/material @angular/animations @angular/cdk
$ npm install --save hammerjs
HammerJS is optional and it helps you add support for touch gestures (e.g. swipe, pan, zoom).

2. Modify angular-cli.json

If you have used Angular CLI to create your project, update your angular-cli.json file to add the Hammer.js library. For this add the following path for hammer.js to the scripts array.

"scripts": [ "../node_modules/hammerjs/hammer.min.js" ],

Restart your server for the changes to take effect.

3. Create Material Module

MaterialModule has been deprecated from Angular Material 2 Beta 3 because of its disadvantage of importing all components even if we don't need them resulting in a unused code and larger app size. The solution is to define a a shared custom material module where you import and export only the required components. Here’s an example of our module:

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

import {
  MatCardModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule,
  MatToolbarModule
} from '@angular/material';

@NgModule({
  imports: [
      MatCardModule,
      MatIconModule,
      MatMenuModule,
      MatButtonModule,
      MatToolbarModule
  ],
  exports: [
      MatCardModule,
      MatIconModule,
      MatMenuModule,
      MatButtonModule,
      MatToolbarModule
  ]
})
export class MaterialModule {}

The next step is to add this module to the root app module "app.module.ts"

4. Import Angular Material Module

Import MaterialModule and add it to the imports array as well as the necessary for animations in your app module. The root app module should look something like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Configure Pre-built Themes and Material Icons

Angular Material comes with a set of pre-built themes that you can choose from. These themes define colors and basic styling. The installed themes are: pink-bluegrey, indigo-pink, purple-green and deeppurple-amber.

Open your global styles.css file and add the following: (you can change the name of the theme based on what you want)

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

You can also gain access to the Material Design Icons by importing them in your project in the head section of the project's root index.html file:

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

6. Let's Test Angular Material!

Angular Material is now ready to be used and you can start playing with it using the available Angular Material components in your HTML template. Here is an example showing the use of Angular Material 2 components:

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

    <span>Getting Started With Material in Angular 5!</span>

    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>expand_more</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Dashboard</button>
    <button mat-menu-item>Profile</button>
    <button mat-menu-item>Settings</button>
  </mat-menu>

  <mat-card>
    <button mat-button>Button 1</button>
    <button mat-raised-button>Button 2</button>
    <button mat-raised-button color="primary">Button 3</button>
    <button mat-raised-button color="accent">Button 4</button>
  </mat-card>

  <span class="like">
    <button mat-fab>
      <mat-icon>thumb_up</mat-icon>
    </button>
  </span>
</div>

Add this to your global styles.css for some styling:

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

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

mat-toolbar-row {
  justify-content: space-between;
}

.like{
  position: fixed;
  bottom: 30px;
  right: 30px;
  color: white;
}

Conclusion

Congratulations! In this article you have learned how you can setup the Angular material 2 in your angular 5 project.

I hope that this article helped you achieve what you were looking for. If you have any questions leave a comment in the section below, if you loved the content share it with you friends!