Componente de Control de flujo en Angular @for

el nuevo componente de control de flujo @for de angular, te permite iterar colecciones y mostrar el contenido en el template. En este ejemplo se puede ver como usarlo para mostrar cada propiedad name del json de users en un párrafo distinto utilizando la propiedad id para hacer seguimiento de cada elemento lo que optimiza el renderizado cuando la lista cambia.

Aunque @for presenta la misma utilidad que *ngFor, @for disponible desde la versión 17 de Angular presenta una sintaxis más elegante.

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

@Component({
    selector: 'app-root',
    template: `
    @for( user of users; track user.id) {
        <p>{{ user.name }}</p>
    }`,
})

export class App {
    users = [{id: 0, name: 'Manolo'}, {id: 1, name: 'Ana'}, {id: 2, name: 'Eric'}, {id: 3, name:'Maria'}, {id: 4, name:'Jaime'}]
}

Esta anotación de @for es clave para reducir el mantenimiento de una aplicación en ciertas vistas de angular, lo que nos permite enfocarnos más en el negocio y no tanto en la lógica.