[Solved] Given this component code:export class AppCompon... }And this template:<button (click)="show = !show">Toggle</button> <div *ngIf="show">Hello World</div>What happens when the button is clicked twice? | Angular

Angular - Directives

Given this component code:

export class AppComponent {
  show = false;
}

And this template:

<button (click)="show = !show">Toggle</button>
<div *ngIf="show">Hello World</div>

What happens when the button is clicked twice?

AThe 'Hello World' div appears, then disappears.

BThe 'Hello World' div appears twice.

CNothing changes; the div stays hidden.

DAn error occurs because of invalid binding.

Step-by-Step Solution

Solution:

Step 1: Understand initial state and toggle
Initially, show is false, so the div is hidden. Clicking toggles show between true and false.
Step 2: Trace two clicks
First click sets show to true, showing the div. Second click sets it back to false, hiding the div again.
Final Answer:
The 'Hello World' div appears, then disappears. -> Option A
Quick Check:
Toggle boolean = show/hide div [OK]

Quick Trick: Toggle boolean twice shows then hides element [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this component code: