[Solved] Given this Angular template snippet:<div *ngIf="showMessage">Welcome!</div> <button (click)="showMessage = !... | Angular

Angular - Directives

Given this Angular template snippet:

<div *ngIf="showMessage">Welcome!</div>
<button (click)="showMessage = !showMessage">Toggle</button>

What happens when the button is clicked twice starting with showMessage = true?

AThe message 'Welcome!' disappears after first click and reappears after second click.

BThe message 'Welcome!' stays visible all the time.

CThe message 'Welcome!' disappears and never comes back.

DThe button click causes an error because showMessage is not defined.

Step-by-Step Solution

Solution:

Step 1: Understand initial state and button action
Initially, showMessage is true, so the <div> with 'Welcome!' is shown. Clicking the button toggles showMessage between true and false.
Step 2: Trace two clicks
First click sets showMessage to false, hiding the message. Second click sets it back to true, showing the message again.
Final Answer:
The message 'Welcome!' disappears after first click and reappears after second click. -> Option A
Quick Check:
Toggle true/false shows/hides message [OK]

Quick Trick: Toggle flips boolean, so message appears/disappears alternately [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this Angular template snippet: