WpPost class - MurhafSousli/ngx-wordpress GitHub Wiki

Use WpPost class to access all properties

id()                        **  post id     
slug()                      **  post slug             
title()                     **  post title
content()                   **  post content
excerpt()                   **  post excerpt without the (read more) link
date()                      **  post date
link()                      **  post link
type()                      **  post type 
categories()                **  post categories array  
tags()                      **  post tags array
format()                    **  post format
author()                    **  post author object (WpUser)
featuredMedia()             **  post featured image id
featuredImage(size)         **  get featured image by size, ("full", large", "medium") or 
                                any other available size in WP
get(propertyName)           **  get any property by name
  • Without WpPost 
<div wpModel="posts" [wpId]="3128" [wpArgs]="{ _embed: true }" (wpResponse)="post = $event.data">

  <h3>{{post?.title?.rendered}}<h3>

  <!-- Post featured image won't work here due to the ugly nested properties from WP API -->
  <img [src]="post?._embedded['wp:featuredmedia'][0]?.media_details?.sizes['large']?.source_url">

</div>
  • With WpPost 
<div wpModel="posts" [wpId]="3128" [wpArgs]="{ _embed: true }" (wpResponse)="post = $event.data">

  <h3>{{post?.title()}}<h3>

  <img [src]="post?.featuredImage('large')">

</div>

When you have a list of posts the best approach is to create PostItemComponent with data input in it

export class PostItemComponent{
  post: WpPost;

  @Input() set data(data) {
    // create WpPost from data
    this.post = new WpPost(data);
  }
}

Now in parent component you can do this

<div wpCollection="posts" [wpArgs]="{ _embed: true }" (wpResponse)="res = $event">

  <post-item *ngFor="let post of res.data" [data]="post"></post-item>

</div>
⚠️ **GitHub.com Fallback** ⚠️