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

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

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

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

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

В итоге параграф и его текст перемещаются внутрь элемента <ng-template>. Сама директива помещается в тег <ng-template>, в котором применяется привязка свойства. Булевое значение привязанного свойство указывает, надо ли отображать соответствующий контент.

В итоге мы можем выбирать либо первый способ со звездочкой, который более компактный, либо второй способ с элементами ng-template.

То же самое касается и директивы ngFor:

<ul>
    <li *ngFor="let item of items">{{item}}</li>
</ul>

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

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