Angular 7 - Virtual Scroll

Publicado: 17 Diciembre 2018 por José Luis García Martínez

Categorías:
Tutorial 26

Tutorial para hacer un scroll virtual en Angular 7, la nueva característica, y es que Angular está pegando fuerte, y ha venido para quedarse. Ver demo.

Para descargar el código fuente, código github.

1. prerrequisitos
2. Importa módulo
3. Obtención de datos de una web (Opcional)
4. Virtual scroll
5. Jugando con sus índices

1. prerrequisitos

Antes de nada, para poder usar virtual scroll debemos instalar la librería cdk de angular

$ npm install @angular/cdk --save

Crea un componente e inclúyelo en la ruta.

$ ng g c pages/virtualScroll

2. Importa módulo

Incorpora el módulo scroll

src/app/app.module.ts

import { ScrollingModule } from '@angular/cdk/scrolling';
...
  imports: [
    ...
    ScrollingModule
  ],

3. Obtención de datos de una web (Opcional)

Para este ejemplo vamos a conseguir todos los emojis que dispone unicode, a través de una web.

la web en cuestion es: https://unicode.org/ Como se ve es una tabla, con sus tr y sus td.

Para obtenerlo y transformarlo en array sería de esta forma:

copy([...document.querySelectorAll('tbody tr td.chars')].map((data)=>{return data.innerText }))

copy: es un comando de chrome que copia al portapapeles. Si pulsas control-v en donde quieras pegarás el contenido.
querySelectorAll: obtenemos todos los datos, pero ojo, no es array, es dom
…[]: transforma el dom en array

En este caso lo he guardado en: src/app/data/emoji.json

4. Virtual scroll

<div *ngIf="emojiList">
  <cdk-virtual-scroll-viewport itemSize="80" class="">

    <div class="" *cdkVirtualFor="let emoji of emojiList; let i=index; let cuenta=count">
       - <span class="emoji"></span>
    </div>
  </cdk-virtual-scroll-viewport>
</div>

itemSize: es el tamaño del item. Debe concordar con el tamaño real, ya que si no dará saltos raros.

5. Jugando con sus índices

Con un viewChild podemos acceder a un index específico:

src/app/pages/virtual-scroll/virtual-scroll.component.ts

  ...
  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
  ...
  irInicio() {
    this.viewport.scrollToIndex(0);
  }

  irFinal() {
    this.viewport.scrollToIndex(this.emojiList.length);
  }

src/app/pages/virtual-scroll/virtual-scroll.component.html

  <button (click)="irInicio()" class="btn btn-primary">Ir inicio</button>
  <button (click)="irFinal()" class="btn btn-primary ">Ir final</button>

... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.