angular
angular

I tried to put 2 structural directives on the same element, but to no avail, this causes an exception:

app/app.component.ts (Excerpt)
<select [(ngModel)]="task" class="form-control">
    <option *ngIf="showTough || t.level !== 'tough'" *ngFor="let t of tasks" [ngValue]="t">{{t.name}} ({{t.level}})</option>
</select>

In this circumstances, ng-container can solve this problem by separating 2 structural directives into different places.

app/app.component.ts (Excerpt)
<select [(ngModel)]="task" class="form-control">
  <ng-container *ngFor="let t of tasks">
    <option *ngIf="showTough || t.level !== 'tough'" [ngValue]="t">{{t.name}} ({{t.level}})</option>
  </ng-container>
</select>

Example

Reference:
https://angular.io/guide/structural-directives#ng-container-to-the-rescue

Last modified: December 4, 2017

Author