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() {  ...}