NgFor Directive in Angular

 *ngFor Directive in Angular

NgFor in Angular is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item.

Here’s a basic example of its use:

<ul>

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

</ul>

This will output html that looks like this:

<ul>

  <li>Al Dente</li>

  <li>D. Liver</li>

  <li>Pepe Roni</li>

</ul>

let user creates a local variable that will be available in the template.

of users means that we’ll be iterating over the users iterable that should be made available in our component.

The * character before ngFor creates a parent template. It’s a shortcut to the following syntax: template=“ngFor let item of items”.

Available local variables

You can also set local variables for the following exported values: index, first, last, even and odd. index will return the current loop index, and the other values with provide a boolean indicating if the value is true or false. For example:

<ul>

  <li *ngFor="let user of users; let i = index; let odd = odd"

      [class.odd]="odd">

    {{i + 1}}. {{ user.name }}

  </li>

</ul>

Will produce the following markup:

<ul>

  <li>1. Al Dente</li>

  <li class="odd">2. D. Liver</li>

  <li>3. Pepe Roni</li>

</ul>

See Also

• *ngIf
• *ngSwitch