Angular 2: Callback when ngFor has finished
You can use @ViewChildren for that purpose
@Component({ selector: 'my-app', template: ` <ul *ngIf="!isHidden"> <li #allTheseThings *ngFor="let i of items; let last = last">{{i}}</li> </ul> <br> <button (click)="items.push('another')">Add Another</button> <button (click)="isHidden = !isHidden">{{isHidden ? 'Show' : 'Hide'}}</button> `,})export class App { items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; @ViewChildren('allTheseThings') things: QueryList<any>; ngAfterViewInit() { this.things.changes.subscribe(t => { this.ngForRendred(); }) } ngForRendred() { console.log('NgFor is Rendered'); }}
origional Answer is herehttps://stackoverflow.com/a/37088348/5700401
You can use something like this (ngFor local variables):
<li *ngFor="#item in Items; #last = last" [ready]="last ? false : true">
Then you can Intercept input property changes with a setter
@Input() set ready(isReady: boolean) { if (isReady) someCallbackMethod(); }
For me works in Angular2 using Typescript.
<li *ngFor="let item in Items; let last = last"> ... <span *ngIf="last">{{ngForCallback()}}</span></li>
Then you can handle using this function
public ngForCallback() { ...}