Search⌘ K
Home
Courses
Directives and Pipes in Angular

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

Here’s an example of what the solution for this task may look like:

<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

Explanation

In this exercise, we’ll combine knowledge from the lessons about NgFor and NgClass. Let’s go over the requirements step by step:

We displaying users with the NgFor directive:

<section *ngFor="let user of users">
...