*ngFor Directive in Angular

NgFor 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.

This post covers Angular 2 and up

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โ€.

๐ŸŠ Alligator.io recommends

Our recommended Angular courses

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

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#