angular mateiral design

 
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

ng new angular2-wordpress-app
cd angular2-wordpress-app
ng serve

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

npm install --save @angular/material

Open the app.module.ts file add below lines

import { MaterialModule } from ‘@angular/material';
MaterialModule.forRoot()

your app.module.ts file should look 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 '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Install and import angular animations module

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

npm install --save @angular/animations

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

import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ]

Finally, your app.module.ts file should look 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 '@angular/material';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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

<md-toolbar color="primary">
    <span>Keys and Strokes</span>
    <span class="spacer"></span>
</md-toolbar>
<md-tab-group>
  <md-tab label="Home">
  </md-tab>
  <md-tab label="Articles">
  </md-tab>
</md-tab-group>

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

ng g service articles

Open articles.service.ts file and add below code

import { Injectable } from '@angular/core';
import {HttpModule, Http,Response} from '@angular/http';
import 'rxjs/add/operator/map'
@Injectable()
export class ArticlesService {
http: Http;
posts_Url: string = 'https://public-api.wordpress.com/rest/v1.1/sites/118756247/posts';
constructor(public _http: Http)
{
     this.http = _http;
}
public getUserPosts()
{
     return this.http.get(this.posts_Url) .map((res: Response) => { return res.json(); });
    }
}

Step 7: create an article component

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

ng g component article

Open articles.components.ts file and add below code

import { Component, OnInit } from '@angular/core';
import { ArticlesService } from './articles.service'
@Component({
   selector: 'articles',
   templateUrl: './articles.component.html',
   styleUrls: ['./articles.component.css'],
   providers: [ArticlesService]
})
export class ArticlesComponent implements OnInit {
  constructor(private _postService: ArticlesService) { }
     posts:Object = [];
     ngOnInit() {
        this.getPosts();
     }
    getPosts()
    {
        this._postService.getUserPosts()
            .subscribe(arg => this.posts = arg);
    };
}

 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

 <md-card *ngFor="let post of posts.posts">
	  <md-card-header>
	   <md-card-title>{{ post.title }}</md-card-title>
	  </md-card-header>
   	 <img md-card-image src="{{ post.featured_image }}">
      <md-card-content>
        <div [innerHTML]="post.excerpt"></div>
      </md-card-content>
      <md-card-actions>
        <button md-button >
            <i class="material-icons md-18" >thumb_up</i>
        </button>
        <button md-button >
            <i class="material-icons md-18">thumb_down</i>
        </button>
      </md-card-actions>
</md-card>

Step :9  update app.module.ts

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

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

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

angular mateiral design
angular mateiral design

 

Download Code

[sociallocker] http://keysandstrokes.info/angular2-wordpress-app.zip[/sociallocker]
 

By coderss

Leave a Reply

Your email address will not be published. Required fields are marked *