angular 4 material tutorial

Hello and welcome to this Angular 4 material tutorial. In this tutorial, we will learn how to implement Google’s Material Design with Angular 4. Google has released Angular 4 since then few things have changed. Angular Material installationis one of them. In this Angular Material 4 tutorial, we will learn how to integrate material design with Angular 4. We will also see an Angular 4 Material example.

 

Let’s get started…

 

Angular 4 Material Tutorial for Beginners

When it comes to learning new things, we should always work on a fresh project. So, install a new Angular 4 project. Here in this Angular 4 Material tutorial, I’m using Angular CLI method to install a brand new project. Use the following command.


ng new ngmaterial  /* ngmaterial is the name of the project */

 

Once done with the installation, use the following command to get into the project folder.


cd ngmaterial

 

How to Install Angular 4 Material

To getting started with angular 4 material first, we need to install all dependency. Use the following command to install Angular 4 Material ans its dependency.


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

 

So, we have installed two packages together called @angular/material and @angular/animation.

 

@angular/material: This is official Angular 4 Material package. By installing this, we will be able to use angular 4 material.

@angular/animation: Since Angular 4 has released, animation has become mandatory to install separately from its core library.

 

Once installed Angular 4 material, run your project using the following command.


ng serve

 

Till now we have installed Angular 4 Material. Now, we will import packages. To do so, head over to /src/app/app.module.ts and import following.


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Import { MdGridListModule,MdCardModule,MdMenuModule,MdToolbarModule, MdButtonModule, MdIconModule, } from '@angular/material';

 

Here we import, BrowserAnimationsModule, which is responsible for accessing all Animation packages. Next, we have imported various angular material modules.

 

Before the release of the Angular 4, we used to include only MaterialModule. Now, after the launch of Angular 4, we need to import each Angular Material component that you want to use. That’s why I have included each module individually which I will be using to make an Angular 4 Material Demo for this tutorial and they are Grid, card, Menu, Toolbar, Button, and Icons.

 

Now add all the modules in @NgModule.


imports: [

BrowserModule,

FormsModule,

HttpModule,

BrowserAnimationsModule,

MdGridListModule,

MdCardModule,

MdMenuModule,

MdToolbarModule,

MdButtonModule,

MdIconModule,

],

 

Now you may ask, how would I know the name of modules that I want to import. Don’t worry it’s very simple.

 

When you click on any of Angular Material component, an overview screen render. For example, I opened Grid list component and here is the overview screen.

angular 4 material module

 

To get the name of the module, click on API where you will get the module name of the component. See below screenshot.

angular 4 material module

 

Well, it was the first part of Angular 4 Material tutorial where we learned, how to install Google’s Angular material in Angular 4. Now, we will see an Angular 4 material example application.

 

Must Read: 9 Best Material Design Framework of 2017

 

Let’s continue Angular Material 2 tutorial …

 

Angular 4 Material Example

In this 2nd part of this Angular 4 Material Tutorial, we will see how to build Angular 4 Material application. Here, we are going to build a small Blog application.

 

In order to build Angular 4 Material application, we need to add some required aspects such as material icon and theme.

 

To use the material icon, head over to /src/index.html and load the icon font there.


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

 

To apply the theme styling, we need to include a theme. Here in this Angular 4 Material tutorial, we are using an Angular Material pre built theme. To do so, go to /src/style.css and add the following theme.


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

 

Now we will build an Angular Material blog app. Go to /src/app/app.component.html and use the following code there.


<md-grid-list cols="1" rowHeight="40px" class="bg-wrap">
	<button md-icon-button [mdMenuTriggerFor]="menu">
	<i class="material-icons icon-wrap">menu</i>
	</button>
	<md-menu #menu="mdMenu">
	  <button md-menu-item>
	    <md-icon>home</md-icon>
	    <span>Home</span>
	  </button>
	  <button md-menu-item>
	    <md-icon>mode_edit</md-icon>
	    <span>Blog</span>
	  </button>
	  <button md-menu-item>
	    <md-icon>shopping_basket</md-icon>
	    <span>Deals</span>
	  </button>
	</md-menu>
</md-grid-list>
<md-grid-list cols="2" rowHeight="500px" gutterSize="10px">
	<md-grid-tile>
		<md-card class="example-card border-wrap">
		  <md-card-header>
		    <md-card-title class="head-wrap">Lorem Ipsum is Simply Dummy Text of the Printing</md-card-title>
		  </md-card-header>
		  <img md-card-image src="assets/image/01.jpg" class="img-wrap">
		  <md-card-content>
		    

		      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal using Lorem Ipsum.
		    

		  </md-card-content>
		  <md-card-actions>
		    <a href=""><button md-button>READ MORE</button></a>
		  </md-card-actions>
		</md-card>
	</md-grid-tile>

	<md-grid-tile>
		<md-card class="example-card border-wrap">
		  <md-card-header>
		    <md-card-title class="head-wrap">Lorem Ipsum is Simply Dummy Text of the Printing</md-card-title>
		  </md-card-header>
		  <img md-card-image src="assets/image/02.jpg" class="img-wrap">
		  <md-card-content>
		    

		      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal using Lorem Ipsum.
		    

		  </md-card-content>
		  <md-card-actions>
		    <a href=""><button md-button>READ MORE</button></a>
		  </md-card-actions>
		</md-card>
	</md-grid-tile>
</md-grid-list>


 

I have also applied some styling in this application. Go to /src/app/app/component.css and use the following styling there.


.head-wrap{

	font-size:20px;

}

.icon-wrap{

	color:#fff;

}

p{

	line-height:20px;

}

a{

	color:#E91E63;

}

.bg-wrap{

	background:#E91E63;

}

.border-wrap{

	border:1px solid #607D8B;

}

.img-wrap{

	height:250px;

}

 

Congrats you have successfully build your very first Angular 4 Material app. After building the app, it should look like.

angular 4 material demo

 

Conclusion:

After reading this Angular 4 Material tutorial, I hope you will be able to work with Angular 4 Material with an example. If you face any problem, feel free to ask via comment. Do share and help others to learn Angular Material for Angular 4. For more updates, subscribe our newsletter.

 

Thanks !!

 

Angular 4 Forms Tutorial From Scretch

Angular 4 Firebase Tutorial: Build a Small Angular 4 Application With Firebase