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'
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>
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