¿Por qué? Cada vez que necesitamos mostrar un objeto o información proveniente del backend, usualmente es necesario utilizar iteraciones for.

Por ejemplo,

• Lista Conversación
• Fila Tabular
• Galería de Fotos de Red Social
• Y muchos otros.

Entonces hoy vamos a aprender a usar bucles for en la última versión de Angular y la versión anterior de Angular.

Antes de entrar en los detalles de los bucles ngFor o @for en Angular 17, asegúrate de tener instalados algunos de los siguientes requisitos:

PrimeNG

Puedes revisar la guía completa de instalación en este link PrimeNG

npm install primeng

PrimeFlex

Puedes encontrar la guía de instalación completa en este link PrimeFlex

npm install primeflex

Una vez instalado todo, ahora nos enfocamos en el material.

*ngFor

Primero, debemos importar el ngFor de "@angular/common" y también CardModule de "primeng/card", de la siguiente manera;

import { component } from '@angular/core'; 
import { CardModule } from 'primeng/card'; 
import { NgFord } '@angular/common'; 
@component ({
selector: 'app-example', 
standalone: true, 
imports: [
    CardModule, 
    NgFord
],
templateUrl: 
StyleUrl: 
})

Ejemplo .component.ts

Ahora, vamos a codificar la sintaxis del bloque de bucles for en HTML, así;

Ejemplo .component.html

Finalmente, inicia tu Angular con npm start y verás este resultado;

@for

En primer lugar, vamos a remover el módulo ngFor de la sección de importación del componente independiente, de la siguiente manera;

import { component } from '@angular/core'; 
import { CardModule } from 'primeng/card'; 


@component ({
selector: 'app-example', 
standalone: true, 
imports: [
    CardModule, 
],
templateUrl: 
StyleUrl: 
})

Ejemplo .component.ts

Luego, cambiemos el código HTML de esta manera;

Ejemplo .component.html

En la nueva sintaxis de los bloques de for en Angular 17, debemos incluir un valor de seguimiento que es necesario.

El valor de la expresión de seguimiento determina una clave utilizada para asociar los elementos del array con las vistas en el DOM.

Y opcionalmente puedes incluir una sección @empty inmediatamente después del contenido del bloque @for, de esta manera;

Ejemplo .component.html

Finalmente ejecuta y compila tu Angular, entonces verás este resultado;

Fuente