How to express Angular condition more succinctly

Question

How can I write the following more succinctly?

<table class="table">
    <thead>
        <tr *ngFor='let entry of m_myArray; let i = index'>
            <td *ngIf="i == m_myArray.length - 1"><a href=”” (click)="$event.preventDefault();OnShowRecentRecord()">{{getDateFormat(entry.date)}}</a></td>
            <td *ngIf="i != m_myArray.length - 1"{{getDateFormat(entry.date)}}</td>
        </tr>
    </thead>
</table>

If i == m_myArray.length - 1 I want the table entry to be a link, otherwise just text. I have used a test on i against m_myArray.length twice and feel like I should be able to use ngElse (or similar) to avoid that.

Did you read https://angular.io/api/common/NgIf? You _can_ use if and else. — jonrsharpe, Sep 28 '21 at 15:54
Does this answer your question? [How to use \*ngIf else?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else) — jonrsharpe, Sep 28 '21 at 15:55

score 0 · Accepted Answer · answered Sep 28 '21 at 15:57

In the angular world, when you are using ngFor directive, you have access to many variables. The ones that you are looking for is:

last which is true for the last element (exactly) for your case

<table class="table">
    <thead>
        <tr *ngFor='let entry of m_myArray; let i = index; let isLast = last'>
            <td *ngIf="isLast"><a href=”” (click)="$event.preventDefault();OnShowRecentRecord()">{{getDateFormat(entry.date)}}</a></td>
            <td *ngIf="!isLast">{{getDateFormat(entry.date)}}</td>
        </tr>
    </thead>
</table>

score 0 · Answer 2 · answered Sep 28 '21 at 16:04

here is stackblitz code sample

<table class="table">
  <thead>
    <tr *ngFor="let entry of m_myArray; let i = index">
      <div *ngIf="i == m_myArray.length - 1; else notLastIndex">
        <td><a href="””">link</a></td>
      </div>

      <ng-template #notLastIndex>
        <td>{{ entry }}</td>
      </ng-template>
    </tr>
  </thead>
</table>

How to express Angular condition more succinctly

2 Answers2