Virtual scrolling en Angular

Hola a todos, hoy os voy a explicar como funciona virtual scrolling en Angular.

Virtual scrolling es una funcionalidad que salió en Angular 7 que nos permite mostrar varios elementos de una forma mas optima, ya que si por ejemplo, tuviéramos 1000 elementos, no mostraría los 1000 elementos sino que al hacer scroll iría cambiando los elementos, haciendo que tengamos menos elementos realmente.

Creamos nuestro proyecto:

Crear y ejecutar un proyecto angular

Para ello, necesitamos instalar la dependencia @angular/cdk

Una vez instalado, en app.module, importamos el módulo ScrollingModule que viene de @angular/cdk/scrolling

Creamos un nuevo componente:

Recuerda importarlo en declarations en app.module.

Vamos a crearnos un array que lo rellenaremos con 10.000 números.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-elements',
  templateUrl: './list-elements.component.html',
  styleUrls: ['./list-elements.component.css']
})
export class ListElementsComponent implements OnInit {

  public listNumbers: number[]

  constructor() { }

  ngOnInit() {
    this.listNumbers = [];
    for (let index = 0; index < 10000; index++) {
      this.listNumbers.push(index);
    }
    console.log(this.listNumbers);
  }

}

En el HTML, llamaremos al componente cdk-virtual-scroll-viewport y con la directiva cdkVirtualFor sustituirá al ngFor.

<cdk-virtual-scroll-viewport class="block-list-num" itemSize="50">

  



<div class="block-num" *cdkVirtualFor="let n of listNumbers">
    <span>{{n}}</span>
  </div>




</cdk-virtual-scroll-viewport>

Por dar algo de estilos, en la parte CSS ponemos:

.block-list-num{
    height: 200px;
}

.block-num{
    height: 20px;
    margin-bottom: 5px;
    padding: 10px;
    text-align: center;
    font-size: 24px;
    border: 1px solid #000;
    background: darkgreen;
}

En app.component.html, quitamos todo y ponemos:

<app-list-elements></app-list-elements>

Arrancamos con npm start y esto es lo que veremos:

Fijémonos que tenemos solo 8 bloques, no hay 10000, según vayamos haciendo scroll estos se irán cambiando de valor.

Hemos dicho que en este caso hay 8 bloques, pero esto se puede cambiar con la propiedad itemSize.

Esta propiedad sirve para indicar la altura en píxeles de cada fila de la lista.

El desplazador virtual luego usa esto para determinar cuántas filas puede almacenar en búfer por encima y por debajo de la ventana gráfica. Cuanto menos alto sea el itemSize, más intentará cargar y almacenar en búfer.

Aquí puedes descargar el ejemplo.

Os dejo un video donde lo explico con más detalle:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.