Cacher is the code snippet organizer for pro developers

<section>
  <h1>Contacts</h1>
  <loader *ngIf="paginatorRef.isLoading$ | async"><loader>

  <section *ngIf="(pagination$ | async) as pagination">
    <table>
      <thead>
        ..
      </thead>
      <tbody>
        <tr *ngFor="let contact of pagination.data">
          <td>{{contact.name}}</td>
          ...
        </tr>
      </tbody>
    </table>

    <p>{{pagination.from}} - {{pagination.to}} of {{pagination.total}}</p>

    <ul>
      <li [class.disabled]="paginatorRef.isFirst" 
         (click)="paginatorRef.setFirstPage()">
         First page
      </li>
      
      <li [class.disabled]="paginatorRef.isFirst" (click)="paginatorRef.prevPage()">
         Prev
      </li>
      
      <li *ngFor="let page of pagination.pageControls"
          (click)="paginatorRef.setPage(page)"
          [class.active]="paginatorRef.isPageActive(page)">
          {{page}}
      </li>
      
      <li [class.disabled]="paginatorRef.isLast" (click)="paginatorRef.nextPage()">
         Next
      </li>
      
      <li [class.disabled]="paginatorRef.isLast" (click)="paginatorRef.setLastPage()">
         Last
      </li>
    </ul>
  </section>

</section>