La directiva @for
representa una evolución significativa en la forma de manejar iteraciones y listas en aplicaciones Angular. Esta directiva no solo mejora la claridad del código, sino que también optimiza el rendimiento en la manipulación de datos dinámicos.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Conceptos clave de la directiva @for
Introducción a la directiva @for
- Las directivas @for
representan una evolución en la iteración de colecciones dentro de las plantillas de Angular, ofreciendo una sintaxis intuitiva y eficiente, comparada y en ciertos aspectos superior a la de *ngFor
.
- Permite renderizar de forma repetida un bloque de contenido para cada elemento en una colección, con capacidades avanzadas de seguimiento y optimización de rendimiento.
Sintaxis básica
- La estructura de @for
sigue el patrón de un bucle for-of
tradicional, pero está diseñada específicamente para el contexto de las plantillas Angular.
- Ejemplo básico:
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ul>
Funcionalidad de seguimiento
- El seguimiento es crucial para la eficiencia, permitiendo a Angular identificar y reutilizar elementos del DOM de manera eficaz.
- La expresión track
es obligatoria en los bucles @for
para optimizar las operaciones DOM al modificar la colección. Esta propiedad permite identificar de manera única cada elemento dentro de la lista para poder manejar eficientemente las actualizaciones del DOM.
Manejo de listas vacías
- La directiva @for
incluye una cláusula @empty
para manejar elegantemente el caso de colecciones vacías.
- Ejemplo:
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No hay elementos.</li>
}
</ul>
Variables de contexto en @for
La directiva @for
proporciona varias variables de contexto implícitas que pueden ser muy útiles al trabajar con iteraciones. Estas variables ofrecen información adicional sobre cada elemento en la iteración.
- $index: es una variable implícita que proporciona la posición actual en la iteración. Esto es útil cuando necesitas numerar los elementos o realizar acciones basadas en su posición.
@for (item of items; track item.id; let i = $index) {
<div> {{ i + 1 }}. {{ item.name }} </div>
}
- $first y $last: Booleanos que indican si el elemento es el primero o el último de la iteración.
@for (item of items; track item.id; let isFirst = $first; let isLast = $last) {
<div [class.first-item]="isFirst" [class.last-item]="isLast" [class.middle-item]="!isFirst && !isLast">
@if (isFirst) {(Primero)}
{{ item.name }}
@if (isLast) {(Último)}
</div>
}
- $even y $odd: Booleanos que indican si el índice del elemento es par o impar.
@for (item of items; track item.id; let even = $even; let odd = $odd) {
<div [class.even-row]="even" [class.odd-row]="odd">
{{ item.name }}
</div>
}
- $count: Proporciona el número total de elementos en la iteración.
@for (item of items; track item.id; let i = $index; let total = $count) {
<div>{{ item.name }} ({{ i + 1 }} de {{ total }})</div>
}
Estas variables de contexto son especialmente útiles para:
- Numerar elementos
- Aplicar estilos diferentes a elementos pares e impares
- Agregar lógica especial para el primer o último elemento
- Mostrar la posición relativa de un elemento en la lista
- Implementar paginación o carga incremental basada en el índice
Estas variables permiten un control preciso sobre el renderizado y comportamiento de cada elemento en la iteración.
Ejemplo combinando múltiples variables de contexto:
@for (item of items;
track item.id;
let i = $index;
let f = $first;
let l = $last;
let e = $even;
let o = $odd;
let c = $count) {
<div [class]="{ 'first': f, 'last': l, 'even': e, 'odd': o }">
{{ item.name }} ({{ i + 1 }}/{{ c }})
{{ f ? '🏆' : l ? '🏁' : '' }}
{{ e ? 'Par' : 'Impar' }}
</div>
}
Este ejemplo demuestra cómo se pueden utilizar múltiples variables de contexto en una sola iteración para crear una visualización rica y dinámica de los elementos de la lista.
Cómo se vería este ejemplo en el navegador:
CSS utilizado en este ejemplo:
div {
padding: 10px;
margin: 5px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.first {
background-color: #e6f7ff;
border: 2px solid #1890ff;
font-weight: bold;
}
.last {
background-color: #fff1f0;
border: 2px solid #ff4d4f;
font-style: italic;
}
.even {
background-color: #f0f5ff;
}
.odd {
background-color: #fff7e6;
}
.first.even, .last.even {
border-left: 5px solid #52c41a;
}
.first.odd, .last.odd {
border-left: 5px solid #faad14;
}
Ejemplos avanzados de uso
Anidación de directivas estructurales
La directiva @for
se puede combinar con otras directivas estructurales para crear lógica más compleja.
<div>
@for (category of categories; track category.id) {
<h2>{{ category.name }}</h2>
<ul>
@for (item of category.items; track item.id) {
<li>{{ item.name }}</li>
}
</ul>
}
</div>
Uso con componentes personalizados
La directiva @for
se puede utilizar eficientemente con componentes personalizados.
<app-product-grid>
@for (product of products; track product.id) {
<app-product-card [product]="product"></app-product-card>
} @empty {
<app-no-products-found></app-no-products-found>
}
</app-product-grid>
Manipulación dinámica de listas
La directiva @for
es especialmente útil para manejar listas que cambian dinámicamente.
interface Todo {
id: number;
task: string;
}
@Component({
selector: 'app-todo-list',
template: `
<ul>
@for (todo of todos(); track todo.id) {
<li>
{{ todo.task }}
<button (click)="removeTodo(todo.id)">Eliminar</button>
</li>
} @empty {
<li>No hay tareas pendientes.</li>
}
</ul>
<button (click)="addTodo()">Agregar tarea</button>
`
})
export class TodoListComponent {
todos = signal<Todo[]>([]);
addTodo() {
this.todos.update(todos => [...todos, { id: Date.now(), task: 'Nueva tarea' }]);
}
removeTodo(id: number) {
this.todos.update(todos => todos.filter(todo => todo.id !== id));
}
}
En este ejemplo, la directiva @for
se actualiza automáticamente cuando se modifican los todos, gracias al uso de señales (signals
) para manejar el estado.
Observables
La directiva @for
puede trabajar eficientemente con observables
, aprovechando el pipe async
para manejar la suscripción y desuscripción automática. El bucle se ejecuta cada vez que el observable emite un nuevo valor.
import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
selector: 'app-observable-example',
template: `
<ul>
@for (item of items$ | async; track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>Cargando items...</li>
}
</ul>
`
})
export class ObservableExampleComponent {
items$: Observable<Array<{id: number, name: string}>>;
constructor() {
this.items$ = interval(1000).pipe(
map(i => [
{id: i + 1, name: `Item ${i + 1}`},
{id: i + 2, name: `Item ${i + 2}`},
{id: i + 3, name: `Item ${i + 3}`}
]),
take(5)
);
}
}
En este ejemplo, items$
es un observable que emite un nuevo array de items
cada segundo, durante 5 segundos. La directiva @for
, combinada con el pipe async
, maneja automáticamente la suscripción al observable y la actualización de la vista cada vez que se emite un nuevo valor. La cláusula @empty
se muestra mientras el observable no ha emitido ningún valor, proporcionando una experiencia de carga fluida.
Uso de @for
con métodos y expresiones complejas
La directiva @for
no se limita a iterar sobre arrays simples; también puede trabajar con métodos, funciones y expresiones más complejas, tanto en la fuente de datos como en la cláusula track
. Esto permite una mayor flexibilidad, como filtrar elementos dinámicamente o implementar lógica personalizada para el tracking.
1.- Uso de métodos para la fuente de datos
import { Component, signal } from '@angular/core';
interface Item {
id: number;
name: string;
category: string;
}
@Component({
selector: 'app-filtered-list',
template: `
<h2>Lista Filtrada</h2>
<input [value]="filterText()" (input)="updateFilter($event)" placeholder="Filtrar por nombre">
@for (item of getFilteredItems(); track getItemId(item)) {
<div class="item">{{item.name}} ({{item.category}})</div>
} @empty {
<div>No se encontraron items.</div>
}
`
})
export class FilteredListComponent {
items = signal<Item[]>([
{ id: 1, name: 'Manzana', category: 'Frutas' },
{ id: 2, name: 'Banana', category: 'Frutas' },
{ id: 3, name: 'Zanahoria', category: 'Verduras' },
{ id: 4, name: 'Brócoli', category: 'Verduras' },
{ id: 5, name: 'Leche', category: 'Lácteos' }
]);
filterText = signal('');
getFilteredItems() {
const filter = this.filterText().toLowerCase();
return this.items().filter(item =>
item.name.toLowerCase().includes(filter)
);
}
getItemId(item: Item) {
return item.id;
}
updateFilter(event: Event) {
const target = event.target as HTMLInputElement;
this.filterText.set(target.value);
}
}
En este ejemplo, getFilteredItems()
se usa como fuente de datos para @for
. Este método filtra dinámicamente los items
basándose en el término de búsqueda actual.
2.- Expresiones complejas en la cláusula track
@Component({
selector: 'app-complex-list',
template: `
<ul>
@for (item of complexItems(); track getUniqueIdentifier(item)) {
<li>{{ item.name }} ({{ item.category }})</li>
}
</ul>
`
})
export class ComplexListComponent {
complexItems = signal<Array<{name: string, category: string, subId: number}>>([
{name: 'Item 1', category: 'A', subId: 101},
{name: 'Item 2', category: 'B', subId: 102},
{name: 'Item 3', category: 'A', subId: 103}
]);
getUniqueIdentifier(item: {name: string, category: string, subId: number}) {
return `${item.category}-${item.subId}`;
}
}
Aquí, getUniqueIdentifier()
se utiliza en la cláusula track
para generar un identificador único para cada item
, combinando la categoría y el subId.
3.- Uso de funciones de filtrado y ordenación
@Component({
selector: 'app-sorted-filtered-list',
template: `
<ul>
@for (item of getSortedAndFilteredItems(); track item.id) {
<li>{{ item.name }} - ${{ item.price }}</li>
} @empty {
<li>No hay productos disponibles.</li>
}
</ul>
`
})
export class SortedFilteredListComponent {
items = signal<Array<{id: number, name: string, price: number, inStock: boolean}>>([
{id: 1, name: 'Producto A', price: 10, inStock: true},
{id: 2, name: 'Producto B', price: 15, inStock: false},
{id: 3, name: 'Producto C', price: 20, inStock: true}
]);
getSortedAndFilteredItems() {
return this.items()
.filter(item => item.inStock)
.sort((a, b) => a.price - b.price);
}
}
En este caso, getSortedAndFilteredItems()
filtra los productos para mostrar solo los que están en stock y los ordena por precio.
Estos ejemplos demuestran cómo @for
puede utilizarse con métodos y expresiones complejas para crear listas dinámicas y flexibles. Al combinar @for
con funciones personalizadas, puedes implementar lógica de negocio sofisticada directamente en tus plantillas, manteniendo al mismo tiempo un código limpio y mantenible.
Aprendizajes de esta lección
- Entender la sintaxis y funcionalidad de
@for
. - Comprender el uso de la función
track
en@for
para mejorar el rendimiento al actualizar listas. - Conocer las variables de contexto disponibles en
@for
. - Conocer las aplicaciones avanzadas de
@for
, incluyendo su uso con observables, métodos de filtrado y ordenación, y expresiones complejas en la cláusulatrack
.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs