Ionic 7 Angular 16 Blog Application with WordPress Rest API Posts Data

Hello friends, welcome back to my blog. Today this blog post will tell you, Ionic 7 Angular 16 Blog Application with WordPress Rest API Posts Data.

Angular 16 came and Ionic 7 also. If you are new then you must check below two links:

• Angular 16
• Ionic 7

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh Ionic 7 and angular 16 setup and for this we need to run below commands but if you already have Ionic 7 and angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @ionic/cli

ionic start ionic-wordpress-rest-api blank --type=angular

cd ionic-wordpress-rest-api

ionic g page posts  

ionic g page post-detail

ionic generate service shared/wpIonic

2. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/app.module.ts file:

...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
  imports: [...
    HttpClientModule],
    ...

3. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/app.routing.module.ts file:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'posts',
    pathMatch: 'full'
  },
  {
    path: 'posts',
    loadChildren: () => import('./posts/posts.module').then( m => m.PostsPageModule)
  },
  {
    path: 'post-detail/:id',
    loadChildren: () => import('./post-detail/post-detail.module').then( m => m.PostDetailPageModule)
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/posts/posts.page.ts file:

import { Component, OnInit } from '@angular/core';
import { WpIonicService } from '../shared/wp-ionic.service';
import { LoadingController } from '@ionic/angular';
 
@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {
 
  Posts: any = [];
  postCount = null;
  page = 1;
 
  constructor(
    private wpService: WpIonicService, 
    private loadingController: LoadingController
  ) { }
 
  ngOnInit() {
    this.initPosts();
  }
 
  async initPosts() {
    let loading = await this.loadingController.create({
      message: 'Loading ...'
    });
 
    await loading.present();
 
    this.wpService.getAllPosts().subscribe((data) => {
      this.postCount = this.wpService.allPosts;
      this.Posts = data;
      loading.dismiss();
    });
  }
 
  infiniteLoad(e: any) {
    this.page++;
 
    this.wpService.getAllPosts(this.page).subscribe((data) => {
      this.Posts = [...this.Posts, ...data];
      e.target.complete();
 
      // Disable loading when reached last
      if (this.page == this.wpService.pages) {
        e.target.disabled = true;
      }
    });
  }
 
}

5. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/posts/posts.page.html file:

<ion-header>
  <ion-toolbar color="success">
    <ion-title>Therichpost Blog</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-item>
    <ion-label>
      <strong>Total Posts</strong>
    </ion-label>
    <ion-badge color="danger" *ngIf="postCount">{{ postCount }}</ion-badge>
  </ion-item>
  <ion-card *ngFor="let post of Posts">
    <ion-card-header>
      <ion-card-title [innerHTML]="post.title.rendered"></ion-card-title>
      <ion-card-subtitle>{{ post.date_gmt | date }}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <div [innerHTML]="post.excerpt.rendered"></div>
      <ion-button expand="full" fill="clear" [routerLink]="['/', 'post-detail', post.id]">Read More</ion-button>
    </ion-card-content>
  </ion-card>
  <ion-infinite-scroll threshold="120px" (ionInfinite)="infiniteLoad($event)">
    <ion-infinite-scroll-content loadingText="Fetching Posts">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

6. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/post-detail/post-details.page.ts file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { WpIonicService } from '../shared/wp-ionic.service';
@Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.page.html',
  styleUrls: ['./post-detail.page.scss'],
})
export class PostDetailPage implements OnInit {
  postDetial: any;
  constructor(
    private activatedRoute: ActivatedRoute,
    private wpService: WpIonicService
  ) {}
  ngOnInit() {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.wpService.postDetails(id).subscribe((data) => {
      this.postDetial = data;
    });
  }
  goToOrgPost() {
    window.open(this.postDetial.link, '_blank');
  }
}

7. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/post-detail/post-details.page.html file:

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/posts"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ postDetial?.title.rendered }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <div *ngIf="postDetial">
    <div [innerHTML]="postDetial.content.rendered" padding></div>
  </div>
</ion-content>
<ion-footer color="secondary">
  <ion-toolbar>
    <ion-button expand="full" fill="clear" (click)="goToOrgPost()">
      Check Original Post
    </ion-button>
  </ion-toolbar>
</ion-footer>

8. Now friends we just need to add below code into ionic-wordpress-rest-api/src/app/shared/wp-ionic.service.ts file:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class WpIonicService {
  endpoint = `https://therichpost.com/woocommerce_tricks/wp-json/wp/v2/`;
  allPosts = null;
  pages: any;
 
  constructor( private httpClient: HttpClient ) { }
 
  getAllPosts(page = 1): Observable<any[]> {
    let options = {
      observe: "response" as 'body',
      params: {
        per_page: '6',
        page: ''+page
      }
    };
 
    return this.httpClient.get<any[]>(`${this.endpoint}posts?_embed`, options)
    .pipe(
      map((res: any) => {
        this.pages = res['headers'].get('x-wp-totalpages');
        this.allPosts = res['headers'].get('x-wp-total');
        return res['body'];
      })
    )
  }
 
  postDetails(id: any) {
    return this.httpClient.get(`${this.endpoint}posts/${id}?_embed`)
    .pipe(
      map((post) => {
        return post;
      })
    )
  }
}

8. Now friends we just need to add or set below code into ionic-wordpress-rest-api/tsconfig.json file:

...
"compilerOptions": {
    ...
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
},
"angularCompilerOptions": {
     ...
    "strictTemplates": false,
   
}
...

Friends in the end must run ionic serve -l command into your terminal to run the ionic 7 project(localhost:8100).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa Rich

Thank you