Scroll Infinito con Angular 6 y Firestore

0
920


Existen muchas formas de programar un Scroll Infinito con Angular 6 y Firestore, nosotros vamos a escoger el camino sencillo, haciendo uso de Arrays, así podremos controlar con un código muy sencillo nuestra aplicación, y funcionará igual de bien que otra hecha con Observables, algo que veremos más adelante.

Nuestro proyecto estará desarrollado con AngularCLI, lo único que vamos a instalar son un par de dependencias, entre ellas AngularFire y ngx-infinite-scroll, así que vamos a ejecutar el siguiente comando dentro de nuestro proyecto.

Paginación con AngularFire

Ahora vamos a crear un servicio muy sencillo con el siguiente comando el cual nos ayudará a paginar los datos utilizando bases de datos Firestore.

Lo abrimos y añadimos el siguiente código que únicamente contiene un método el cual nos ayudará a paginar.

El método paginate nos retornará los registros paginados de forma correcta con un limit y un offset.

Ahora vamos a crear un nuevo componente para utilizar el método paginate y formatear los datos de forma correcta y dejarlos listos para pasar a la template.

Lo abrimos y añadimos lo siguiente.

  • fetchTodosPaginated: empuja nuevos todos al array todos si existe.
  • onScroll: se ejecutará cada vez que la página toque el final del scroll.

Finalmente sólo nos queda definir el contenido de la template, así que podemos añadir el siguiente código y todo quedará funcionando.

  • Recorremos los todos para mostrarlos en una tabla html.
  • Utilizamos la directiva infiniteScroll llamando al método onScroll en el evento scrolled.

Si has seguido todos los pasos tendrás el mismo ejemplo que muestro en el vídeo de más arriba funcionando.