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

<code javascript>
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"];
}
</code>
В качестве значения директива принимает значение перебора аля-foreach: let item of items. Каждый перебираемый элемент помещается в переменную item, которую мы можем вывести на страницу.\\

{{ :angular:angular2:directive:3.10.png |}}

При переборе элементов нам доступен текущий индекс элемента через переменную index, которую мы также можем использовать. Например:
<code javascript>
<div>
    <p *ngFor="let item of items; let i = index">{{i+1}}.{{item}}</p>
</div>
</code>

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