Will the below code work?<div *ngIf="products" *ngFor="let product of products"> {{product.name}} </div>
<div *ngIf="products" *ngFor="let product of products"> {{product.name}} </div>
we cannot use two structural directives on same element.Structural directives like ngfor can do complex things with the host element and its childrens. When two directives placed on same element we cannot decide which one takes precedence i.e., which should execute first *ngIf or *ngFor? What if *ngFor executes before *ngIf, which is supposed to display or hide the elements.Use ngFor and ngIf on same element It’s very common scenario where we want to repeat a block of HTML using ngFor only when a particular condition is true. i.e., if ngIf is true.So in this case to use *ngIf and *ngFor on same element, place the *ngIf on a parent element that wraps the *ngFor element.