[FIXED] detect last two elements in angular loop

Issue

I am using primeng table in my template as shown below :

<p-table  [paginator]="true" [rows]="10" [showCurrentPageReport]="true"
          currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,25,50]"
          [value]="histories">
  <ng-template pTemplate="header">
    <tr>
      <th>duration</th>
      <th>build id</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-build>
    <tr>
      <td [style]="{'word-wrap':'break-word !important'}">
        {{ secondsToDhms(build.duration) }}
      </td>
      <td [style]="{'word-wrap':'break-word !important'}">
        {{ build.build_id }}
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="paginatorleft">
    <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
  </ng-template>
  <ng-template pTemplate="paginatorright">
    <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
  </ng-template>
</p-table>

How can i get index of loop element in p-table because it’s not a classic ngfor let of, so i can test later if it’s the last element to hide a button in my template ?

Solution

Might as well post a proper answer.

<ng-template pTemplate="body" let-build let-rowIndex="rowIndex">
    <tr>
      <td [style]="{'word-wrap':'break-word !important'}">
        {{ secondsToDhms(build.duration) }}
      </td>
      <td [style]="{'word-wrap':'break-word !important'}">
        {{ build.build_id }}
      </td>
    </tr>
</ng-template>

You can use let-rowIndex="rowIndex" to get access to the element’s index.

Answered By – Aldin Bradaric

Answer Checked By – Dawn Plyler (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published