Home » Angular » Simple WordPress Post Display Using Rest API With Angular

Simple WordPress Post Display Using Rest API With Angular

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.

install WordPress inside in your 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.

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.

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.

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.

Output:

Connecting Angular and the WordPress API

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.

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply

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

Back to top