ngx-spinner: Una libreria load spinner para Angular 4–5–6

Continuamos con los unboxig de librerias para Angular que son muy utiles para nuestros proyectos, estoy seguro que existen muchas otras pero quiero hablarle de las que son necesarias a la hora de realizar proyectos con Angular.

Hoy le llego el turno a ngx-spinner una libreria para animar la carga de elementos de nuestra app, obteniendo una apariencia dinamica y atractiva. Esta libreria fue creada por Yuvraj Chauhan, su licencia es MIT la cual es libre y permite reutilizarla en el desarrollo de software propietario, por lo tanto, no tenemos ningun problema en usarla, mas siempre aconsejo nombrar el autor de la misma.

Una de las cosas que me llamo mi atenciones esta libreria es la maleabilidad en la personalizacion y lo facil que es para su uso.

Instalación

$ npm install --save ngx-spinner

Implementación

Importamos el module NgxSpinnerModule en nuestra app.module.ts

// Import library module
import { NgxSpinnerModule } from 'ngx-spinner';
@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ]
})
export class AppModule { }

Agregamos el service NgxSpinnerService donde queramos usarla,en este caso lo voy a usar al inicio de la carga de mi projecto en app.component.ts.

import { NgxSpinnerService } from 'ngx-spinner';
class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) { }
  ngOnInit() {
    /** spinner starts on init */
    this.spinner.show();
    setTimeout(() => {
        /** spinner ends after 5 seconds */
        this.spinner.hide();
    }, 5000);
  }
}

Ahora en nuestro template insertamos la siguiente etiqueta, aqui podemos ir al site de personalización que tiene esta libreria y escoger el tipo de animacion, color de la misma, color de fondo, etc. Clik aqui