[Solved] Why does this Angular template cause an error?<li *ngFor="let item of items" *ngIf="item.visible">{{item.name}}</li> | Angular

Angular - Directives

Why does this Angular template cause an error?

<li *ngFor="let item of items" *ngIf="item.visible">{{item.name}}</li>

AngIf must be placed before ngFor

BCannot use two structural directives on the same element

CngFor requires a trackBy function when combined with ngIf

DngIf cannot be used inside list elements

Step-by-Step Solution

Solution:

Step 1: Understand Angular structural directive rules
Angular does not allow more than one structural directive on the same element.
Step 2: Analyze the template
Both *ngFor and *ngIf are structural directives on the same <li> element, causing an error.
Final Answer:
Cannot use two structural directives on the same element -> Option B
Quick Check:
Only one structural directive per element [OK]

Quick Trick: One element = one structural directive only [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Why does this Angular template cause an error?