Collection directive - MurhafSousli/ngx-wordpress GitHub Wiki

Use this directive to get a collection of (posts, pages, categories...etc), here is a basic example

<ul wpCollection="posts" [wpArgs]="{ }" (wpResponse)="res = $event">

   <li *ngFor="let post of res.data"> {{ post.title.rendered }} </li>

</ul>

We just got a collection of posts!

Collection directive fires the request when WpArgs is set, and it will fire a new request every time we change it.

Collection Directive Options:

  • [wpCollection] desired endpoint, read more Endpoints chapter

  • [wpArgs] query arguments, read more Query arguments chapter

  • (wpResponse) response, $event": {data, pagination, error}

  • (wpLoading) loading state, $event: boolean

moreover this directive has 4 functions for pagination:

@ViewChild(CollectionDirective) wpCollection;

this.wpCollection.get(args);  // get a new collection of posts
this.wpCollection.more();     // get next page combined with previous ones
this.wpCollection.next();     // get next page
this.wpCollection.prev();     // get prev page

Using any of these functions will result into a new response in (wpResponse).

Get a single post by slug

<div wpCollection="posts" [wpArgs]="{slug: 'hello-world'}" (wpResponse)="post = $event.data[0]">
     {{post?.title?.rendered}}
</div>

Advanced Example:

Get a collection of posts with a loading indicator and a load more button

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

  <ul>
      <li *ngFor="let post of posts">{{post.title()}}</li>
  </ul>
      
  <button (click)="wpCollection.more()">Load more</button>

  <div *ngIf="loading">Loading...</div>
</div>
 @ViewChild(CollectionDirective) wpCollection;
 posts;
 args = {
    per_page: 5,
    _embed: true
 };

 /** 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;
      }
    }
 }

We can still do better, check WpPost Chapter

⚠️ **GitHub.com Fallback** ⚠️