Angular io (4) *ngFor first and last
Inside the ngFor
you have access to several variables:
- index: number: The index of the current item in the iterable.
- first: boolean: True when the item is the first item in the iterable.
- last: boolean: True when the item is the last item in the iterable.
- even: boolean: True when the item has an even index in the iterable.
- odd: boolean: True when the item has an odd index in the iterable.
So:
<md-expansion-panel *ngFor="let item of items; first as isFirst" *ngClass="{ 'first' : isFirst }"> <content></content></md-expansion-panel>
Documentation at https://angular.io/api/common/NgForOf gives this example:
<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span></li>
This how you can do it :
<md-expansion-panel *ngFor="let item of items; let first = first; let last = last" [ngClass]="{ 'first' : first }"> <content></content> </md-expansion-panel>
NgFor provides several exported values that can be aliased to local variables:
index
will be set to the current loop iteration for each templatecontext so it start from 0.first
will be set to a boolean value indicating whether the item isthe first one in the iteration.last
will be set to a boolean value indicating whether the item isthe last one in the iteration.even
will be set to a boolean value indicating whether this item hasan even index.odd
will be set to a boolean value indicating whether this item hasan odd index.
for more information : NgFor-directive 🚀🚀
a complete example
<div *ngFor="let n of items; let itemsCount = count;let idx = index , let isOdd = odd;let first = first ;let last = last;"> {{n}} , {{itemsCount}} , {{idx}} , odd 👉 {{isOdd}} , first 👉 {{first}} , last 👉 {{last}}</div>