Bird
0
0

Given this component code:

medium📝 component behavior Q4 of 15
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:
  1. Step 1: Understand initial state and toggle

    Initially, show is false, so the div is hidden. Clicking toggles show between true and false.
  2. 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.
  3. Final Answer:

    The 'Hello World' div appears, then disappears. -> Option A
  4. Quick Check:

    Toggle boolean = show/hide div [OK]
Quick Trick: Toggle boolean twice shows then hides element [OK]
Common Mistakes:
  • Assuming div duplicates on toggle
  • Thinking div stays visible after toggle
  • Believing toggle causes error

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes