typescript - Cargador mientras se cargan datos en Angular2

Me gustaría mostrar un cargador (logo gif simple) mientras se cargan los datos. En mi aplicación uso una función en una clase de servicio para obtener datos en JSON gracias a una URL (un servicio web). Luego, llamo a esta función en otra clase para inyectar los datos en un arreglo.

Mi función en service.ts:

  getData() {          
    return   this.http
                 .get(myUrl,/*headers*/)
                 .map((res:Response) => res.json());
 }

Mi función en class.ts:

array : any;

getData() {
this.service.getData()
  .subscribe(
  data => {    
    this.array = data;
  },
  err => console.error(err)
);
}

class.html :

<li *ngFor="let element of array"> {{element}}</li>

Quizás podría usar *ngIf en .html y usar una variable booleana para mostrar el cargador o los datos, pero ¿cómo saber cuándo los datos están completamente cargados y cuándo no?

¡Gracias de antemano por cualquier ayuda!

Respuesta #1

*ngIf con un estado booleano está bien. subscribe(...) admite un callback onComplete:

getData() {
  this.isLoading = true;
  this.service.getData()
  .subscribe(
    data => {    
      this.array = data;
      // this.isLoading = false;
    },
    err => console.error(err),
    () => this.isLoading = false;
  );
}

Restablecer el estado en la primera devolución de llamada (donde lo agregué como comentario) también está bien porque Http solo entrega un único evento. Para observables que entregan más de un evento, la tercera devolución de llamada podría ser más adecuada porque se llama cuando el observable se cierra y no se enviarán más eventos.