September 4, 2024

¿Qué es el "tracking" de elementos en Angular?

Angular

Cuando Angular renderiza listas, por ejemplo usando *ngFor, genera y destruye elementos del DOM dependiendo de cómo cambia la lista de datos. En listas grandes o dinámicas, esto puede volverse ineficiente, ya que Angular no sabe qué elementos son nuevos, cuáles han sido eliminados o cuáles simplemente han cambiado.

Para solucionar este problema, Angular permite usar una clave de seguimiento (tracking key) que ayuda a identificar cada elemento de la lista de manera única. Esta clave puede ser, por ejemplo, un id único que tenga cada elemento en tu lista de datos. Así, cuando la lista cambia, Angular sabe exactamente qué elementos necesita actualizar o eliminar sin tener que volver a renderizar todo.

Sintaxis anterior con `trackBy`

En la versión anterior de Angular (antes de Angular 17), cuando usabas *ngFor, podías optimizar el proceso de renderizado utilizando una función trackBy que devolviera un identificador único para cada elemento:

<div *ngFor="let event of events; trackBy: trackByEventId">
  <p>{{ event.name }}</p>
</div>

<!-- En el archivo de TypeScript -->
trackByEventId(index: number, event: any): number {
  return event.id;
}

En este ejemplo, trackBy le dice a Angular que identifique cada evento por su id. Si la lista de eventos cambia, Angular solo actualizará los elementos que tengan un id diferente, en lugar de volver a renderizar toda la lista.

Nueva Sintaxis con `track`

En Angular 17, han simplificado esta funcionalidad con la nueva sintaxis @for.

En lugar de tener que definir una función trackBy por separado, ahora puedes indicar directamente el campo que Angular debería usar para hacer el seguimiento de los elementos. Esto se hace usando la palabra clave track.

Por ejemplo:

@for (event of events; track event.id) {
  <p>{{ event.name }}</p>
}

Aquí, track event.id indica a Angular que use el campo id de cada evento para identificarlo. Si el valor del id de un evento cambia o se elimina, Angular solo actualizará el evento correspondiente sin necesidad de volver a renderizar toda la lista.

¿Cuándo usar `track`?

Debes usar track cuando trabajas con listas de elementos que tienen un identificador único (como un id o cualquier campo que sea único para cada elemento en la lista). Esto mejora el rendimiento cuando la lista cambia frecuentemente, ya que Angular solo actualiza los elementos que realmente han cambiado.

Ejemplo Completo

Supongamos que tienes una lista de eventos, cada uno con un id, un name y una date. Usarías @for y track de la siguiente manera:

<ul>
  @for (event of events; track event.id) {
    <li>
      {{ event.name }} - {{ event.date | date }}
    </li>
  } @empty {
    <li>No hay eventos disponibles</li>
  }
</ul>

En este ejemplo:

@for recorre la lista de events.

track event.id asegura que Angular solo actualice o elimine los elementos que cambian su id, optimizando la eficiencia del renderizado.

Si la lista de events está vacía, se usa @empty para mostrar un mensaje.

Resumen

track ayuda a Angular a optimizar el rendimiento al identificar de manera única cada elemento de la lista.

En la nueva sintaxis, no necesitas una función externa para trackBy, simplemente puedes especificar el campo único directamente en el @for.

Mejora la eficiencia del DOM, especialmente cuando trabajas con listas grandes o que cambian frecuentemente.

Escrito por Pol Valle

Me interesa especialmente desarrollar aplicaciones que no solo sean funcionales, sino también atractivas y fáciles de usar. Lo consigo aplicando principios SOLID, arquitectura limpia y testing para garantizar la calidad.