Po Béo Po Béo - 2 months ago 36
HTML Question

Angular 2 ngIf and ngFor combination

I am wondering if I have a combination of

ngIf
and
ngFor
like this. What will run first when Angular creates its elements?

<li *ngIf='isDisplayed' *ngFor='let item of itemsList'></li>


Imaging in a scenario that we have an
itemsList
of couple of thousands
item
, and
ngFor
runs first would make application a complete disaster. Of course I can use a
div
to wrap this and put
ngIf
there, but knowing more about this is great. Thanks.

Answer

It is not supported to add more than one structural directive on one element. You need to use the canonical form using an explicit <template> tag for at least one of them. Use an extra <ng-container *ngIf="..."></ng-container> or <ng-container *ngFor="..."> element for one of both structural direcives.

See also https://github.com/angular/angular/issues/4205

Comments