Tutorial Angular: La directiva @for en Angular

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.

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.