=====Символ звездочки и синтаксический сахар=====

Можно заметить, что при использовании директив ngFor и ngIf перед ними ставится символ звездочка. По факту это не более чем синтаксический сахар, который упрощает применение директивы. Так, определение ngIf:

<code javascript>
<p *ngIf="condition">
    Привет мир
</p>
<p *ngIf="!condition">
    Пока мир
</p>
</code>

по факту будет представлять следующий код:

<code javascript>
<ng-template [ngIf]="condition">
    <p>
        Привет мир
    </p>
</ng-template>
<ng-template [ngIf]="!condition">
    <p>
        Пока мир
    </p>
</ng-template>
</code>

В итоге параграф и его текст перемещаются внутрь элемента ''<ng-template>''. Сама директива помещается в тег ''<ng-template>'', в котором применяется привязка свойства. Булевое значение привязанного свойство указывает, надо ли отображать соответствующий контент. \\
\\
В итоге мы можем выбирать либо первый способ со звездочкой, который более компактный, либо второй способ с элементами ng-template.\\
\\
То же самое касается и директивы ngFor:
<code javascript>
<ul>
    <li *ngFor="let item of items">{{item}}</li>
</ul>
</code>

Этот код будет эквивалентен следующему:

<code javascript>
<ul>
    <ng-template ngFor let-item [ngForOf]="items">
        <li>{{item}}</li>
    </ng-template>
</ul>
</code>