Angular 52: Rendimiento — detección OnPush y track
easy⏱ 5 mincourseangular
OnPush + signals: actualizaciones precisas en lugar de barridos completos
Con ChangeDetectionStrategy.OnPush, Angular deja de recorrer un componente durante la verificación por defecto y solo lo vuelve a renderizar cuando algo de lo que realmente depende cambia: una nueva referencia de input(), un evento del DOM dentro de él, o (dado que Angular rastrea las lecturas de signals en los templates) un signal que lee y que se actualiza. Eso es justo lo que pasa aquí: actualizar products es lo único que puede provocar un nuevo render.
@Component({
selector: 'app-product-list',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `...`,
})
export class ProductListComponent {}
track es obligatorio en @for, y es lo que hace rápidas las actualizaciones de listas
Todo bloque @for requiere una expresión track, normalmente un id estable y único como product.id. Angular la usa para emparejar los elementos viejos y nuevos de la lista entre renders, de modo que solo parchea los nodos del DOM que realmente se movieron, se agregaron o se eliminaron, en lugar de destruir y reconstruir toda la lista.
@for (product of products(); track product.id) {
<li>{{ product.name }}</li>
} @empty {
<li>No products yet.</li>
}
@empty se renderiza cuando la lista rastreada no tiene nada que mostrar
El bloque opcional @empty dentro de @for se renderiza automáticamente cuando el iterable está vacío, sin necesitar un @if (products().length === 0) aparte.