NgFor это встроенная директива, которая облегчает итерацию маcсива или объекта и создать шаблон для каждого элемента.

Ниже приведен пример использования:

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

В результате будет сгенерирован HTML код:

<ul>
  <li>Al Dente</li>
  <li>D. Liver</li>
  <li>Pepe Roni</li>
</ul>

• let user создает локальную переменную, которая будет доступна в шаблоне.
• of users значит что будет итерироваться переменная users, которая должна быть задана в компоненте. 
• Символ * перед ngFor создает родительский шаблон. Это более короткая версия полного синтаксиса template=”ngFor let item of items”

Локальные переменные

Также возможно инициализировать такие переменные: index, first, last, even и odd. index возвращает индекс текущего элемента масива. Другие принимают значение true или false в зависимости, является ли элемент первым, последним, индекс парным или непарным.

<ul>
  <li *ngFor="let user of users; let i = index; let odd = odd"
      [class.odd]="odd">
    {{i + 1}}. {{ user.name }}
  </li>
</ul>

В результате будет сгенерирован HTML код:

<ul>
  <li>1. Al Dente</li>
  <li class="odd">2. D. Liver</li>
  <li>3. Pepe Roni</li>
</ul>