*ngIf for conditional rendering in Angular - Step-by-Step Execution

Concept Flow - *ngIf for conditional rendering

Start

↓

Evaluate *ngIf condition

↓

Render element in DOM

↓

Do not render element

↓

End

Angular checks the *ngIf condition. If true, it adds the element to the page. If false, it removes or skips it.

Execution Sample

Angular

<div *ngIf="showMessage">Hello, Angular!</div>
<button (click)="toggle()">Toggle Message</button>

showMessage = true;

toggle() {
  this.showMessage = !this.showMessage;
}

This code shows or hides a message based on the showMessage variable toggled by a button.

Execution Table

Step	Action	*ngIf Condition (showMessage)	Render Element?	DOM Change
1	Initial render	true	Yes	Element <div>Hello, Angular!</div> added to DOM
2	User clicks button	true -> false	No	Element removed from DOM
3	User clicks button again	false -> true	Yes	Element added back to DOM
4	No further clicks	true	Yes	No change
Exit	No more actions	-	-	Rendering stable

💡 Execution stops when no more user clicks occur and DOM matches condition

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
showMessage	true	false	true	true	true

Key Moments - 3 Insights

Why does the element disappear when showMessage becomes false?

Because *ngIf removes the element from the DOM when the condition is false, as shown in execution_table step 2.

Does the element stay in the DOM but hidden when *ngIf is false?

No, *ngIf completely removes the element from the DOM, not just hides it. This is clear in execution_table step 2 where the element is removed.

What happens if the condition changes back to true?

The element is re-created and added back to the DOM, as seen in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of showMessage at step 2?

A undefined

B true

C false

D null

💡 Hint

Check variable_tracker row for showMessage at After 1 (step 2).

At which step does the element get removed from the DOM?

A Step 1

B Step 2

C Step 3

D Exit

💡 Hint

See execution_table DOM Change column for when element is removed.

If showMessage started as false, what would happen at initial render?

A Element would not be rendered

B Element would be rendered

C Error occurs

D Element rendered but hidden

💡 Hint

Recall *ngIf removes element if condition is false, as shown in execution_table step 2.

Concept Snapshot

*ngIf directive conditionally adds or removes elements from the DOM.
Syntax: <element *ngIf="condition">content</element>
If condition is true, element is rendered.
If false, element is removed completely.
Useful for showing/hiding UI based on variables.

Full Transcript

The *ngIf directive in Angular controls whether an element appears on the page. When Angular renders the page, it checks the condition inside *ngIf. If the condition is true, Angular adds the element to the page's DOM. If false, Angular removes the element entirely. For example, if showMessage is true, a message div is shown. When the user clicks a button, showMessage toggles between true and false. Each toggle causes Angular to add or remove the message element. This means the element is not just hidden but completely removed when the condition is false. When the condition becomes true again, Angular recreates and adds the element back. This behavior helps keep the page clean and efficient by only rendering what is needed.