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.
|
1 |
ng new angular-blog |
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.
|
1 |
ng add @angular/material |
After the installation of Angular Material let’s now import Components MatToolbarModule, MatCardModule, and MatButtonModule in the app.module.ts like this below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatToolbarModule, MatCardModule, MatButtonModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule, MatCardModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatToolbarModule, MatCardModule, MatButtonModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule, MatCardModule, MatButtonModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
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.
|
1 |
ng generate service wp-api |
Once you generate the wp-api service now open and add the below code in the wp-api.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class WpApiService { constructor(private http: HttpClient) { } getPosts(): Observable<any[]> { return this.http.get<any[]>('http://localhost/angularblog/index.php/wp-json/wp/v2/posts?_embed', { params: { per_page: '8' } }); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { WpApiService } from './wp-api.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { posts$: Observable<any[]>; constructor(private wp: WpApiService) { this.posts$ = this.wp.getPosts(); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<mat-toolbar> <span>AOX Blog</span> </mat-toolbar> <mat-card *ngFor="let post of posts$ | async" class="card-width"> <mat-card-header> <mat-card-title>{{ post.title.rendered }}</mat-card-title> <mat-card-subtitle>{{post.date | date:'longDate'}}</mat-card-subtitle> </mat-card-header> <img mat-card-image src="{{ post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url }}"> <mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-content> <a mat-raised-button color="primary" target="_blank" rel="noopener noreferrer">View</a> </mat-card> <router-outlet></router-outlet> |
For Style, you need to add the below code in your app.component.css.
|
1 2 3 4 5 |
.card-width { max-width: 400px; float: left; margin: 10px; } |
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:
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
