*ngIf for conditional rendering in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered with this *ngIf condition?

Consider this Angular template snippet:

<div *ngIf="isVisible">Hello World</div>

If isVisible is false, what will be rendered in the browser?

Angular

<div *ngIf="isVisible">Hello World</div>

A An empty div will be rendered with no text inside.

B The text 'Hello World' will be shown.

C The div will be rendered but hidden with CSS.

D Nothing will be rendered; the div is removed from the DOM.

💡 Hint

Think about what *ngIf does when the condition is false.

The *ngIf directive removes the element from the DOM entirely when the condition is false. So nothing is rendered at all.

📝 Syntax

intermediate

Which *ngIf syntax is correct for showing content only if count is greater than 0?

Choose the correct Angular template syntax to conditionally render a paragraph only when count > 0.

A <p *ngIf="count &gt; 0">Count is positive</p>

B <p *ngIf="count &lt; 0">Count is positive</p>

C <p *ngIf="count == 0">Count is positive</p>

D <p *ngIf="count = 0">Count is positive</p>

💡 Hint

Remember the comparison operator for 'greater than' is >.

Option A correctly uses *ngIf="count > 0" to check if count is greater than zero.

Option A checks if count is less than zero, which is wrong.

Option A uses assignment (=) which is invalid in *ngIf.

Option A checks if count equals zero, not greater than zero.

🔧 Debug

advanced

Why does this *ngIf condition cause an error?

Given this Angular template:

<div *ngIf="user.isLoggedIn">Welcome!</div>

and the component has user = null;, what error will Angular throw?

Angular

user = null;

A No error; the div will not render.

B SyntaxError: Unexpected token '.'

C TypeError: Cannot read property 'isLoggedIn' of null

D ReferenceError: user is not defined

💡 Hint

What happens if you try to access a property on null in JavaScript?

Accessing user.isLoggedIn when user is null causes a runtime TypeError because you cannot read properties of null.

❓ state_output

advanced

What is the rendered output after toggling the flag?

Given this component code:

flag = true;

and template:

<button (click)="flag = !flag">Toggle</button>
<div *ngIf="flag">Visible</div>

What will the user see after clicking the button twice?

Angular

flag = true;

A An error occurs because flag is undefined.

B The text 'Visible' will be shown.

C The button disappears.

D Nothing will be shown.

💡 Hint

Each click toggles the flag between true and false.

Starting with flag true, first click sets flag false (div hidden), second click sets flag true again (div visible). So after two clicks, 'Visible' is shown.

🧠 Conceptual

expert

Why prefer *ngIf over CSS display:none for conditional rendering?

Which is the best reason to use Angular's *ngIf directive instead of toggling CSS display:none to hide/show elements?

A *ngIf removes the element from the DOM, improving performance and accessibility.

B *ngIf only hides the element visually but keeps it in the DOM for faster toggling.

C CSS display:none removes the element from the DOM, which can cause errors.

D Using CSS display:none is preferred because it triggers Angular change detection.

💡 Hint

Think about what happens in the DOM and how screen readers behave.

*ngIf removes the element from the DOM entirely, which means it is not processed by the browser or screen readers, improving performance and accessibility.

CSS display:none hides the element visually but keeps it in the DOM, which can cause unnecessary processing and accessibility issues.