Директива ngFor позволяет перебрать в шаблоне элементы массива. Например:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<ul>
                  <li *ngFor="let item of items">{{item}}</li>
                </ul>`
})
export class AppComponent {
 
    items =["Tom", "Bob", "Sam", "Bill"];
}

В качестве значения директива принимает значение перебора аля-foreach: let item of items. Каждый перебираемый элемент помещается в переменную item, которую мы можем вывести на страницу.

При переборе элементов нам доступен текущий индекс элемента через переменную index, которую мы также можем использовать. Например:

<div>
    <p *ngFor="let item of items; let i = index">{{i+1}}.{{item}}</p>
</div>

Надо учитывать, что индексация идет с нуля, поэтому, чтобы в данном случае отсчет шел с единицы, к переменной i прибавляется единица.