Directives and Pipes in Angular/

...

/

Solution: The Built-in `NgFor` Directive

Solution: The Built-in `NgFor` Directive

Let’s compare the task result with expected result and explanation.

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">
  <p>{{user.name}}</p>
...