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

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
  
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123">
      <span >{{ 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'

CodePudding user response：

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
  
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123;let last = last;">
      <span >{{ 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>

CodePudding user response：

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
  
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); 
        let i = index; 
        let test = test11123;
        let last = last">
      <span >{{ 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