typescript - angular 2 escuchar/detectar elementos DOM renderizados desde *ngFor

¿Hay una manera de detectar/escuchar un evento/hook cuando Angular 2 termina de renderizar elementos del DOM iniciados desde *ngFor?

por ejemplo, tengo esta lista:

<ul>
  <li *ngFor="let item of items">
    <span>{{item.name}}</span>
    <img [src]="item.url">
  </li>
</ul>

los elementos están inicialmente vacíos y se llenan después de que se completa la solicitud http:

items = [];

ngOnInit(): void {
  console.log('start')
  this.svc.getItems() // http service call
    .subscribe(
      items => {
        this.items = items;
        console.log('done');
      },
      err => this.handleError(err)
    );
}

Necesito mostrar algún tipo de carga entre 'inicio' y 'finalizado'. Supuse que cuando se registra 'finalizado', entonces todo está hecho, pero no es así. Toma un tiempo para que *ngFor renderice los elementos y cargue las imágenes.

¿Entonces hay una manera de detectar que *ngFor ha terminado y las imágenes se han cargado?

Respuesta #1

No hay ningún hook. *ngFor también se actualiza siempre que items cambian.

Lo que puedes hacer es llamar a detectChanges

constructor(private cdRef:ChangeDetectorRef) {}

ngOnInit(): void {
  console.log('start')
  this.svc.getItems() // http service call
    .subscribe(
      items => {
        this.items = items;
        console.log('done');
      },
      err => this.handleError(err),
      () => {
         this.cdRef.detectChanges();
         console.log('done')
      }
    );
}

Hasta donde sé, esto causa sincrónicamente que se actualice el DOM.

Para tu caso de uso puedes omitir this.cdRef.detectChanges(); porque Angular2 ejecutará la detección de cambios de todos modos inmediatamente después de que se llame a console.log('done') en el callback completado.