PHP
JavaScript
Angular AngularJS jQuery Ajax
Linux
.htaccess

March 27, 2020

Simple WordPress Post Display Using Rest API With Angular

4126

In this article, I show you a simple WordPress post display using Rest API with Angular. If you like to integrate a quick blog post in your Angular project, So here you have the solution with the WordPress Rest API. Using WordPress is an easy way to integrate posts on your Angular project because WordPress is the free and opensource PHP based CMS, that allows you to integrate the blog functionality.

In WordPress, we have endpoints in the Rest API functionality that allows you to get the JSON data. Using the JSON data we can get the post data by passing URL in our Angular project. Angular is a front-end framework based on TypeScript and it is much fast as we compare to other frameworks. So here our main aim to display WordPress posts on our Angular project, by the following steps will help you for further integration.

First, install WordPress inside in your Angular App

The initial step is creating WordPress inside or outside of your Angular project. To know more about WordPress installation here you have an article for installing an Angular app.

You can see the example above image, so here I installed WordPress inside the Angular App. Now once you completed the installation then install the REST API plugin, here I used WP REST API Controller to get the JSON data.

Once you completed the installation of WP REST API Controller, Now you can get the JSON data like the below URL.

http://softaox.info/wp-json/wp/v2/posts?_embed

1	http://softaox.info/wp-json/wp/v2/posts?_embed

Based on the above URL we going to display the post on our Angular project.

Setting up your Angular project

Before getting into the display post on Angular first you need to install the Angular App here we going to use Angular 9. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.

Once you completed the installation now start implementing using the below steps.

Step: 1

Now open the app.module.ts and import the HttpClientModule like below I was given.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step: 2

Now open the app.component.ts and import the HttpClient, Once you added that next declare the post variable and get the post data through the WordPress post URL. Below I provided how to get the data through the WordPress Rest API URL.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts = [];

  constructor(private http: HttpClient){}

  ngOnInit(): void{
    this.http.get('http://localhost/project/admin/wp-json/wp/v2/posts?_embed').subscribe(data =>{
      for(let key in data){
        if(data.hasOwnProperty(key)){
          this.posts.push(data[key]);
        }
      }
      console.log(this.posts);
    })
  }

}

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

posts = [];

constructor(private http: HttpClient){}

ngOnInit(): void{

this.http.get('http://localhost/project/admin/wp-json/wp/v2/posts?_embed').subscribe(data =>{

for(let key in data){

if(data.hasOwnProperty(key)){

this.posts.push(data[key]);

}

console.log(this.posts);

})

}

Step: 3

The final step to display post in the loop with ul > li tags like below I have given. In the code, you see we used ngFor to loop the Rest API post data in the app.component.html. In the loop, we get the post title, posted on, post image, and post content.

<ul>
  <li *ngFor="let post of posts">
     <h1>{{post.title.rendered}}</h1>
       <p>Posted on: {{post.date | date:'longDate'}}</p>
      <img src="{{ post._embedded['wp:featuredmedia']['0'].media_details.sizes.thumbnail.source_url }}">
      <p [innerHTML]='post.excerpt.rendered'></p>
  </li>
</ul>

<ul>

<h1>{{post.title.rendered}}</h1>

<p>Posted on: {{post.date | date:'longDate'}}</p>

</li>

</ul>

Output:

Conclusion:

I hope this article will help you to display WordPress post on your Angular project. If have any doubt about this use comment box and you like this article, kindly share it with your friends.

Angular Blog Post Blog Posts Rest API WordPress & Angular

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]