[Solved] Given the following Angular template code, what will be rendered?<ul> <li *ngIf="showItem">Item 1</li> <li>Item 2</li> </ul>Assuming showItem is false. | Angular

Angular - Directives

Given the following Angular template code, what will be rendered?

<ul>
  <li *ngIf="showItem">Item 1</li>
  <li>Item 2</li>
</ul>

Assuming showItem is false.

ANo output, error occurs

B<ul><li>Item 1</li><li>Item 2</li></ul>

C<ul></ul>

D<ul><li>Item 2</li></ul>

Step-by-Step Solution

Solution:

Step 1: Understand *ngIf behavior with false condition
*ngIf removes the element from the DOM if the condition is false.
Step 2: Apply this to the template
The first <li> with *ngIf="showItem" will not render because showItem is false. The second <li> renders normally.
Final Answer:
<ul><li>Item 2</li></ul> -> Option D
Quick Check:
*ngIf false removes element [OK]

Quick Trick: *ngIf false means element is removed, not hidden [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given the following Angular template code, what will be rendered?