Home » Angular » Angular Material and WordPress Rest API

Angular Material and WordPress Rest API

In this tutorial, we going to see Angular Material and WordPress Rest API. With the latest technology, we love to load the data instantly on the website or blog for that Angular is the easiest way to load the data. Now, we going to load the WordPress post data in our Angular project with the help of Angular Material. To display all the WordPress posts on a single page we going to use REST API. Using both lets, we make the website or blog attractive and user friendly.

Let’s get started and use the Angular CLI to create a new Angular app.

Use the below command to create a new Angular project and if you want to know more about Angular installation here you have an article for installing an Angular app.

Install Angular Material in your Angular Project

Once you create the Angular project now it is time to install the Angular Material this makes the website in a good UI (User Interface). If you have trouble with the installation here you have an article.

After the installation of Angular Material let’s now import Components MatToolbarModule, MatCardModule, and MatButtonModule in the app.module.ts like this below code.

Import HttpClientModule in your Angular App

Now import HttpClientModule in app.module.ts to get the WordPress post data. Like the below code you can use the HttpClientModule in your Angular project.

Create a new service using Angular CLI

Creating a new service will help you to maintain and get WordPress data using HttpClient. Use the below command to generate the service.

Once you generate the wp-api service now open and add the below code in the wp-api.service.ts

The above code will fetch the posts data through HttpClient from our WordPress Rest API and with the simple function, we restricted the posts 8 per page. For the WordPress Rest API URL here you need to use WP REST API Controller .

Note: Once you installed and created Rest API from your blog post now replace with the existing one which I created from my localhost Angular blog.

Now open the app.component.ts and import the wp-api service like the below code. Which helps to get WordPress posts through getPosts() function.

It is time to display the post by using a variable called posts$ and with the help of *ngFor we going to list the WordPress posts data. In the listing, we going to fetch the title, date of published, image, description and post URL. So add the below code in your app.component.html this will help you to display the WordPress posts.

For Style, you need to add the below code in your app.component.css.

Once you added the code now ng serve to execute your Angular App, now you can see the beautiful post view with the Angular Material Design. Here below you can see the output how it looks like.

Output:

Angular Material and WordPress Rest API Demo

Conclusion:
I hope this article will help you to integrate WordPress with the Angular App. If you have any doubts kindly let me know in the comment box section and if you like this article share it with your friends.

Download

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