Explicación Signals

4. Componente flujo-for

Explicación 

• Uso de variables implícitas: $index, $first, $even, etc.
• Uso del bloque @empty

El objetivo va a ser con el @for recorrer colecciones y crear elementos en el DOM

Hay que recordar que una colección trabaja con:

Lo más fácil es asignarla nombres dentro del @for con let

@for (item of items; track item.id;
      let i = $index, total = $count, primero = $first, ultimo = $last, par = $even, impar = $odd) {

  <p>
    {{ i }} / {{ total }}

    @if (primero) {
      <span>(inicio)</span>
    }

    @if (ultimo) {
      <span>(fin)</span>
    }

    @if (par) {
      <span>—par—</span>
    }

  </p>

}

Código final del ts

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

interface Estudiante {
  id: number;
  nombre: string;
  edad: number;
}

@Component({
  selector: 'app-flujo-for',
  standalone: true,
  templateUrl: './flujo-for.component.html',
  styleUrl: './flujo-for.component.css',
})
export class FlujoForComponent {

  // Signal que contiene un array de estudiantes
  estudiantes = signal<Estudiante[]>([
    { id: 1, nombre: 'Ana', edad: 20 },
    { id: 2, nombre: 'Luis', edad: 22 },
    { id: 3, nombre: 'Marta', edad: 19 },
  ]);

  limpiarLista() {
    this.estudiantes.set([]);
  }

  restaurarLista() {
    this.estudiantes.set([
      { id: 1, nombre: 'Ana', edad: 20 },
      { id: 2, nombre: 'Luis', edad: 22 },
      { id: 3, nombre: 'Marta', edad: 19 },
    ]);
  }
}

Código final de la plantilla

<h2>Ejemplo con @for</h2>

<button (click)="limpiarLista()">Vaciar lista</button>
<button (click)="restaurarLista()">Restaurar lista</button>

<ul>

  @for (est of estudiantes(); track est.id;
        let i = $index, primero = $first, par = $even) {

    <li>
      {{ i + 1 }}. {{ est.nombre }} ({{ est.edad }} años)

      @if (primero) {
       Primer elemento
      }

      @if (par) {
       Fila par
      }
    </li>

  } @empty {

    <li>No hay estudiantes en la lista.</li>

  }

</ul>

Incluimos un poco de css para ver resultado mejorado:

button {
  margin-right: 10px;
}

li {
  margin: 6px 0;
}

Y lo importamos en app.components.ts

import { FlujoForComponent } from './components/flujo-for/flujo-for.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FlujoForComponent],
  template: `
    <app-flujo-for></app-flujo-for>
  `
})
export class AppComponent {}