We love Angular and we also love WordPress. So lets make them friends forever.

In this tutorial we will create a new Angular 6 application, connect it to a WordPress site and make a nice Material Design blog list page of it’s posts.

So let’s get started and use the Angular CLI to spin up a new app.

Creating the Angular app

ng new angular-wordpress-api --style scss

This will create us a new shiny app that uses Sass for it’s styling! But we will still need to install Angular Material so we can make our app to look nice, fortunately as of Angular 6 this is super easy using the CLI.

ng add @angular/material

Next up we will add Angular Flex Layout so we can make a nice grid of our posts. As of 29th May 2018 Flex Layout isn’t ready for ng add yet so we will use good old npm for now.

npm i --save @angular/flex-layout@6.0.0-beta.15

Now we have laid the groundwork, we can start creating some code. So open up the new app in your favourite code editor and let’s get cracking.

Importing Material Modules.

Let’s import some Material Components that we can use to make the app look great. Create a new file in the src/app folder and name it app-material.module.ts

Then goto your app.module.ts file and add this module to your app imports.

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppMaterialModule
],

Import Flex module

We should also import the Flex Layout module into app.module.ts, this will help us to create a grid of the posts.

import { FlexModule } from '@angular/flex-layout';

Make sure this is added to your app imports

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppMaterialModule,
  FlexModule
],

Getting some content from WordPress

In order to get some data from WordPress we will first need to add HTTP capability to our app, we can do this by adding the Angular HttpClient module.

Open your app.module.ts and add the following

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

Then add this to your imports

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppMaterialModule,
  FlexModule,
  HttpClientModule
],

Next we will create a service that will handle fetching the post data, this is again simplified by using the Angular CLI
ng generate service wordpress

This will generate a new service file wordpress.service.ts, add the following code to this file.

In this file we create a simple function getPosts that will use the HttpClient to fetch posts from one of our WordPress site, this function will return an Observable of posts. We added a per_page parameter to only grab the latest 6 posts and added ?_embed to the url, this makes sure that the WordPress API will also include the url to the post featured image.

Using our posts data to create a blog list

Next up we want to put that shiny new service to good use and display the results.
So lets change the main app component to show a 3×2 grid of the posts from the WordPress service.
First of all lets change the app.component.ts file to use our service.

So what is going on here?

We created a new observable variable called posts$, this is going to store the list of posts we are going to fetch from the API using the WordPressService.

We will use the async pipe to subscribe to this Observable in our app.component.html view file.

Here you can see we use the Material components to build a simple blog list page. We first add a toolbar with Blog List as it’s title. Next we add a page wrapper div to add some padding. Next comes the Flexy part, we use Angular Flex to create a row layout that wraps and adds a 16px gap between each element.

Inside the Flex Layout div we use Angular Material Card and loop through each post to create a card for each post.

The result looks like this.

You can view all the source code here on GitHub.

Please let us know what you think in the comments below and if you like this then be sure to check out our latest admin template Portal! Which includes Angular, React and HTML admin panel templates.