Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En este tutorial vamos a ver lo sencillo que es mostrar un preloader de forma dinámica con Angular 5 y Observables desde cualquier zona de nuestra aplicación, para ello vamos a utilizar Angular Material.

Lo primero que tenemos que hacer es crear un servicio el cual tendrá una propiedad que será un Observable al cual accederemos desde una template, así que podemos crear un servicio llamado app.service.ts y añadimos el siguiente código.

Ya tenemos un servicio que nos ayudará a mostrar u ocultar nuestro preloader, así que vamos a utilizarlo, abre el archivo donde cargues tu app, normalmente el archivo app.component.ts y añade el servicio al constructor, una vez lo hayas hecho simplemente modifica el archivo app.component.html de la siguiente forma.

A partir de ahora cada vez que ejecutes el método fireLoader() el preloader se mostrará, y cuando llames al método stopLoader() se ocultará, así de simple es poder informar a nuestros usuarios conforme la app está trabajando.