Angular 2 ngIf and ngFor combination

Question

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.

Günter Zöchbauer · Accepted Answer · 2016-09-19T05:23:43.723

3

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

edited Sep 19 '16 at 05:23

answered Jul 16 '16 at 14:09

Günter Zöchbauer

623,577
216
2,003
1,567

What do you mean by "not supported"? I mean, technically I can use them and it's still running, right? – Pho Huynh Jul 16 '16 at 14:11
See the linked issue. In the next version this will throw. You need to move one (`*ngFor` or `*ngIf`) to a ` – Günter Zöchbauer Jul 16 '16 at 14:16

Angular 2 ngIf and ngFor combination

1 Answers1