detect last two elements in angular loop

Question

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 ?

This SO answer here should be sufficient. https://stackoverflow.com/questions/52996750/get-index-with-primng-turbotable-and-angular-6 — Aldin Bradaric, Aug 25 '21 at 14:52

score 1 · Accepted Answer · answered Aug 25 '21 at 14:58

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.

detect last two elements in angular loop

1 Answers1