How to build an app using angular 2 material design

Posted in AngularJs By Raj On May 14, 2017


In this article, I will explain how to build simple app using angular 2 material design, the angular 2 app which I am going to build will consume the WordPress rest API and display WordPress posts using material design card component

Step 1: Setting up Angular CLI Project

The first thing which I am going to do is create an angular project using Angular CLI commands, open the command prompt and run below commands to create a new project

The ng serve command will launch the angular application, just hit the http://localhost:4200/ in address bar to test your application locally

Step 2: Install and import angular 2 material module

Once the project is created then run below command to install angular material module

Open the app.module.ts file add below lines

your app.module.ts file should look like this.

Step 3: Install and import angular animations module

Some Material components depends on the Angular animations, so we must install angular animations module

Once the animations module is installed then we need to import “BrowserAnimationsModule” in the app.module.ts file, open app.module.ts file add below lines

Finally, your app.module.ts file should look like this.

Step 4: Adding material theme and icons

At the time of writing this article by default, the angular material design comes with four  prebuilt themes which are listed out below

  • deeppurple-amber
  • indigo-pink
  • pink-bluegrey
  • purple-green

To apply theme  and icons you need to open index.html file and add below entries at header section

Step 5: Test your application

Open app.component.html file and add below material design components, the components which I have added here are toolbar and tabs

Now, run ng serve command

angular 2 material design

angular 2 material design

Step 6: create articles service

Now, it is time to create a new article service, the service will make a request to the WordPress rest API to get the list of articles, the service has getUserPosts() method, this method returns list of posts in the JSON format

You need to run the below Angular CLI command to create an article service

Open articles.service.ts file and add below code

Step 7: create an article component

You need to run the below Angular CLI command to create an article component

Open articles.components.ts file and add below code

 Step :8  Adding material design card component

Open articles.component.html file and add below code here, we are iterating list of posts and creating card for every article, the card component contains md-card-title which display’s article title, the md-card-content displays excerpt of the article and also there will be two buttons  thumb_up and thumb_down

Step :9  update app.module.ts

Open the app.module.ts file and add ArticlesComponent declarations

Now, run the ng serve command once again the final output should look like below

angular mateiral design

angular mateiral design


Download Code