www.jolugama.com

Angular 7 - Virtual Scroll

Publicado: por

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

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.