Angular – Two Structural Directives on the same DOM element

angular

Deprecated: get_the_author_email is deprecated since version 2.8.0! Use get_the_author_meta('email') instead. in /home/cloudber/public_html/wp-includes/functions.php on line 4713

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

Author: Wu Chia Chong

My main areas of interest are software architectures and software design methods, patterns, and new trends in software development.

Author: Wu Chia Chong

My main areas of interest are software architectures and software design methods, patterns, and new trends in software development.