Sometimes, we want to fix *ngIf and *ngFor on same element causing error with Angular.
In this article, we’ll look at how to fix *ngIf and *ngFor on same element causing error with Angular.
How to fix *ngIf and *ngFor on same element causing error with Angular?
To fix *ngIf and *ngFor on same element causing error with Angular, we can move *ngIf to the ng-container component.
For instance, we write
<ng-container *ngIf="show">
<div *ngFor="let thing of stuff">
{{ log(thing) }}
<span>{{ thing.name }}</span>
</div>
</ng-container>
to use *ngIf in the ng-container component to show the div only when show is true.
And then we use *ngFor in the div to render the items in the stuff array.
Conclusion
To fix *ngIf and *ngFor on same element causing error with Angular, we can move *ngIf to the ng-container component.
