Search⌘ K
AI Features

Solution: The Built-in `NgFor` Directive

Explore how to use Angular's built-in NgFor directive to display user lists efficiently. Learn to handle user selection, apply dynamic classes for styling odd, even, and active items, and implement trackBy functions to optimize rendering performance.

We'll cover the following...

Solution

...
<section *ngFor="let user of users; let even = even; let odd = odd; trackBy: trackBy"
         (click)="selectedUser = user"
         [ngClass]="{even: even, odd: odd, active: selectedUser === user}">
  <p>{{user.name}}</p>
  <p>{{user.premium ? 'Premium' : 'Standard' }} account</p>
</section>
The task’s solution
...