Structural Directives: *ngFor (Render Lists)

*ngFor renders an element for each item in an array.

Basic list rendering

<ul>
  <li *ngFor="let skill of skills">{{ skill }}</li>
</ul>

export class SkillsComponent {
  skills = ['HTML', 'CSS', 'TypeScript', 'Angular'];
}

Getting index

<li *ngFor="let skill of skills; let i = index">
  {{ i + 1 }}. {{ skill }}
</li>

trackBy (important for performance)

If your list updates often, trackBy helps Angular avoid re-rendering everything.

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

export class UsersComponent {
  users = [
    { id: 1, name: 'Emma' },
    { id: 2, name: 'David' },
  ];

  trackById(_: number, item: { id: number }) {
    return item.id;
  }
}

Next: Attribute directives like [ngClass] and [ngStyle].