🚀 Virtual Scroll en Angular: ¡Carga listas infinitas sin perder rendimiento!

🧐 ¿Qué es Virtual Scroll?

Virtual Scroll es una técnica de renderizado en la que solo se dibujan los elementos visibles en pantalla en lugar de cargar toda la lista en el DOM.

📌 Beneficios:

✅ Mejora el rendimiento en listas largas.

✅ Reduce el consumo de memoria y procesamiento.

✅ Hace que la interfaz sea más fluida y rápida.

🔥 Ejemplo clásico sin Virtual Scroll:

Si tienes una lista de 10,000 elementos, Angular los renderiza todos en el DOM, haciendo que la página se vuelva lenta y pesada.

💡 Con Virtual Scroll, solo se renderizan los elementos visibles en pantalla, cargando los demás dinámicamente a medida que el usuario se desplaza.

📌 ¿Cuándo usar Virtual Scroll?

🔹 Listas con muchos elementos (1000+).

🔹 Cuando el rendimiento se ve afectado por demasiados elementos en pantalla.

🔹 Cuando necesitas optimizar el uso de memoria y mejorar la UX.

🛠 Implementación de Virtual Scroll en Angular

Para usar Virtual Scroll en Angular, necesitamos Angular CDK (Component Dev Kit), que proporciona herramientas para mejorar la interfaz de usuario.

1️⃣ Instalar Angular CDK

Si aún no tienes instalado Angular CDK, agrégalo con este comando:

npm install @angular/cdk

2️⃣ Importar ScrollingModule en tu módulo

Abre el archivo app.module.ts e importa el módulo de desplazamiento:

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollingModule  // 📌 Importamos el módulo
  ],
})
export class AppModule { }

3️⃣ Crear una lista con Virtual Scroll

Ahora vamos a crear un componente con una lista de 10,000 elementos, pero solo renderizando los visibles.

📌 Código del componente (virtual-scroll.component.ts):

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

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 10000 }, (_, i) => `Elemento #${i}`);
}

📌 Código del HTML (virtual-scroll.component.html):

itemSize="50" class="scroll-container">
   *cdkVirtualFor="let item of items" class="item">
    {{ item }}

🎯 Explicación:

✅ → Define el área de desplazamiento virtual.

✅ itemSize="50" → Establece el tamaño de cada elemento en píxeles (ajústalo según el diseño).

✅ *cdkVirtualFor="let item of items" → Funciona igual que *ngFor, pero con Virtual Scroll.

📌 Código de estilos (virtual-scroll.component.css):

.scroll-container {
  height: 400px;  /* Altura fija del contenedor */
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
}

.item {
  height: 50px;  /* Debe coincidir con itemSize */
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

🎯 ¿Cómo funciona Virtual Scroll?

1️⃣ El usuario desplaza la lista.

2️⃣ Angular solo renderiza los elementos visibles en el viewport.

3️⃣ Los elementos que salen de la vista se eliminan del DOM, ahorrando memoria.

4️⃣ A medida que el usuario baja, se agregan nuevos elementos dinámicamente.

🔥 Mejoras avanzadas con Virtual Scroll

1️⃣ Usar Virtual Scroll con una API (datos dinámicos)

Si los datos provienen de una API, puedes combinarlos con Virtual Scroll para cargar información de forma eficiente.

Ejemplo con peticiones HTTP:

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

@Component({
  selector: 'app-virtual-scroll-api',
  templateUrl: './virtual-scroll-api.component.html',
  styleUrls: ['./virtual-scroll-api.component.css']
})
export class VirtualScrollApiComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
      .subscribe(data => {
        this.items = data;
      });
  }
}

📌 HTML para la API (virtual-scroll-api.component.html):

itemSize="50" class="scroll-container">
   *cdkVirtualFor="let item of items" class="item">
    {{ item.id }} - {{ item.title }}

🔥 Beneficio:

En lugar de cargar todos los datos de la API en memoria, solo se renderizan los visibles.

📌 Diferencia entre Virtual Scroll y Paginación

📌 ¿Cuándo usar cuál?

🔹 Usa Virtual Scroll cuando tienes grandes volúmenes de datos y necesitas fluidez en la navegación.

🔹 Usa Paginación cuando los datos vienen de una API con muchas páginas y necesitas un control más preciso.

🎯 Conclusión

🔹 Virtual Scroll es ideal para listas largas y mejora el rendimiento.

🔹 Usa cdk-virtual-scroll-viewport para implementar listas dinámicas.

🔹 Se combina bien con APIs para cargar datos de manera eficiente.

🔹 Es una alternativa a la paginación, dependiendo de la UX que necesites.

🎓 ¡Ahora es tu turno!

¿Qué opinas de Virtual Scroll? ¿Tienes dudas o quieres que veamos algún caso específico? ¡Estoy listo para ayudarte! 😃 🚀