How to show 'Edit' link followed by last list item using Angular

Question

List is populating dynamically and width of each list text might vary ..it is small to larger text as well. Here I would like to display 'Edit' link should display after the last list item. Here is the sample code I tried

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

Sample output:

Sunday AAAA
Monday BBBB
Tuesday CCC. 'Edit'

Naren Murali · Answer 1 · 2022-02-28T08:31:14.977

1

Please use *ngFor variables. Reference

Additional details from Maxime Chevallier:

To complete the answer, the let last = last in the *ngFor is a boolean given by Angular that is true when the element is the last element of the array. reference

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123;let last = last;">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button
        *ngIf="last"
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

edited Feb 28 '22 at 08:31

answered Feb 28 '22 at 08:21

Naren Murali

19,250
3
27
54

To complete the answer, the `let last = last` in the `*ngFor` is a boolean given by Angular that is `true` when the element is the last element of the array. https://angular.io/api/common/NgForOf#local-variables – Maxime Chevallier Feb 28 '22 at 08:24
Thanks @NarenMurali, actually. here...I'm able to display all list items one by one...but I need to display 'Edit' link immediately after the last list item. I tried to add the the solution above, but Edit link is completely last visible in the UI. – Rajasekhar Feb 28 '22 at 08:45
@Rajasekhar Use CSS to make the edit link come at the bottom of the table – Naren Murali Feb 28 '22 at 08:47

score 0 · Answer 2 · answered Feb 28 '22 at 08:24

Add last declaration. As you have done with let=index, you can declare all the following vars: index first last even odd

So your code should work with:

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); 
        let i = index; 
        let test = test11123;
        let last = last">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button *ngIf="last"
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

Check other questions with your same issue: Angular 2 ngfor first, last, index loop

How to show 'Edit' link followed by last list item using Angular

2 Answers2