Можно заметить, что при использовании директив 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>