Angular 5 With Material Design Part One: Integrating Angular Material

Introduction

In this article, we'll walk through the steps which are needed to set up an Angular project including the Angular Material Design Library in your project.

We're going to use the Angular CLI to start this project and I'm assuming you already have it installed. If you haven't, use the following command to install it globally.

npm install -g @angular/cli

Step 1: Create a project

Use the following command to create a new Angular project.

ng new MyNgAppWithMaterial

E.g.

Note

I am using my “D” Drive to save my project. You can select any path where you want to create the project.

It will create a new project. After the project is successfully created, go to the Angular Project folder by changing the directory

cd MyNgAppWithMaterial

To check if everything is working correctly, we will run the project using the following command.

ng serve –o

E.g.

This command builds the application and opens it in our default browser.

To stop the server, press CTRL + C while you are on the command prompt and then "Y" and ENTER key. This will stop the server.

Step 2: Install Angular Material and Angular CDK

Type the following command to install the dependencies.

npm install --save @angular/material @angular/cdk

E.g.

Step 3: Install Animations

Some material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

Command

npm install --save @angular/animations

E.g.

We need to import the Angular animation module into app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import the angular animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Import the component modules

Next, for each material component we want to use in our project, we have to import it into the imports array of ngModule above.

If you only have a couple of components, you could import them directly into this file. However, for the purposes of organization and keeping your AppModule brief, you can create a custom module specifically for your material component imports. We'll do that.

To create a new module, use the following command.

Command

ng generate module material Or ng g m material

E.g.

-m=app.module option is used to register material to app.module or you can register it manually like below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import the angular animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MaterialModule } from './material/material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Include all your required material component module, we're only including the MatInputModule like below in material.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatInputModule} from '@angular/material/input';
@NgModule({
imports: [
CommonModule,
MatInputModule
],
exports: [MatInputModule],
declarations: []
})
export class MaterialModule { }

Step 5: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

Since we're using the Angular CLI, we can add this to our styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

E.g.

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 6: Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. To get the full feature set of these elements, HammerJS must be loaded into the application.

We can add HammerJS to our application using following command.

Command

npm install --save hammerjs

E.g.

After installing, import it into your app’s entry point (e.g. src/main.ts).

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

Now, we're going to use any Material Design Icons (they are used quite frequently throughout material), we need to import Material Icons in the /src/index.html file between the head tags.

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyNgAppWithMaterial</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>

Step 6 - Using Angular material component in our component

Okay, now everything is included correctly. Just write some essential Material component inside the app.component.html file.

Add following to the /src/app/app.component.html template,

<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Name" value="Dilip">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
</form>

The CSS tab has a couple of rule sets for the above example to fully work. Visit the /src/app/app.component.css file and paste the following,

.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

Now, save and run your project using command ng serve –o

Then, you can see the two animated textboxes.

And that's the process of integrating and using material components in Angular 5.

Summary

In this article, I discussed how we can include the Angular Material Design Library into our angular project. In the next article, we will start Angular CRUD with Material Design.