Array of posts using WpPost class about ngx-wordpress

[MurhafSousli]

@Jscott388 When you use WpPost, all post properties are accessed using the functions.
First create a child component, let's say <post-item> and in its template

<md-card *ngIf="post">
    <md-card-title-group>
        <md-card-title>
            <h4>{{ post.title() }}</h4>
        </md-card-title>
        <md-card-subtitle>
            <h5>{{ post.date() }}</h5>
        </md-card-subtitle>
        <img *ngIf="post.featuredMedia()" [src]="post.featuredImage('large')">
    </md-card-title-group>
    <md-card-content>
        <p [innerHTML]="post.excerpt()"></p>
    </md-card-content>
    <md-card-actions>
        <button md-raised-button [routerLink]="['./', post.slug()]">Read More</button>
    </md-card-actions>
    <md-card-footer>
        <md-chip-list *ngFor="let tag of post.tags()">{{ tag.name }}</md-chip-list>
    </md-card-footer>
</md-card>

export class PostItemComponent{
  post: WpPost;

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

In parent component

<div wpCollection="posts" [wpArgs]="args"
          (wpResponse)="onWpResponse($event)" (wpLoading)="loading = $event">

    <post-item *ngFor="let post of posts" [data]="post"></post-item>
</div>

<md-spinner *ngIf="loading"></md-spinner>
<button md-raised-button (click)="more()">Load More Posts</button>

 posts;
 args = {
    per_page: 5,  //get 5 items per page
    _embed: true  //enable featured image, categores, tags and author in the response
 };

 /** Handle WP Response */
 onWpResponse(res) {
    if (res) {
      if (res.error) {
        console.log('[WP posts response]:', res.error);
      }
      if(!res.data.length){
        console.log('[WP posts response]: Empty response!');
      }
      if (res.data) {
        this.posts = res.data;
      }
    }

  @ViewChild(CollectionDirective) wpCollection;  
  /** 
  *  Use the directive reference to call functions like `next()` `prev()` for pagination 
  *  or `more()` for loading more
  */  
   more() {
      this.wpCollection.more();
   }
 }

[Jscott388]

@MurhafSousli Thanks! Do you have a full fledged working example site that I could reference too? I would like to see it more in action than just code samples. I would love to help the wiki out in actually making a start from finish tutorial. Just getting my head around Angular 4 and how everything works.

[MurhafSousli]

@Jscott388 I would have made a demo, but github pages requires a secured wordpress url (https) and mine is http, if you have a secured one already and you don't mind sharing it, I can make a demo using your wp backend
And sure It would be great if someone can help me improving the wiki

[Jscott388]

Have nothing in a repo? Don't need a live working one, just general layout.

[MurhafSousli]

Unfortunately I don't have one