*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.

Practice

1. What does the Angular directive *ngIf do in a template?

easy

A. It loops over a list and renders each item.

B. It styles an element dynamically.

C. It binds a variable to an input field.

D. It conditionally includes or removes an element from the DOM based on a boolean expression.

Solution

1. Step 1: Understand the purpose of *ngIf

   *ngIf is used to conditionally render elements in Angular templates.

2. Step 2: Identify what *ngIf controls

   It controls whether an element is included or removed from the DOM based on a true or false condition.

3. Final Answer:

   It conditionally includes or removes an element from the DOM based on a boolean expression. -> Option D

4. Quick Check:

   *ngIf = conditional rendering [OK]

Hint: Remember *ngIf shows or hides elements by condition [OK]

Common Mistakes:

• Confusing *ngIf with *ngFor for looping
• Thinking *ngIf changes styles only
• Assuming *ngIf binds data to inputs

2. Which of the following is the correct syntax to conditionally display a paragraph only if isVisible is true?

easy

A. <p *ngIf="isVisible">Hello</p>

B. <p ngIf="isVisible">Hello</p>

C. <p *ngFor="isVisible">Hello</p>

D. <p *ngShow="isVisible">Hello</p>

Solution

1. Step 1: Identify the correct Angular directive syntax

   Angular uses *ngIf with an asterisk to indicate a structural directive.

2. Step 2: Check the attribute and expression format

   The expression should be inside quotes after *ngIf=, like *ngIf="isVisible".

3. Final Answer:

   <p *ngIf="isVisible">Hello</p> -> Option A

4. Quick Check:

   Use *ngIf with asterisk and quotes [OK]

Hint: Look for *ngIf with asterisk and quotes [OK]

Common Mistakes:

• Omitting the asterisk before ngIf
• Using ngIf without * (like ngIf="isVisible")
• Confusing *ngIf with *ngFor or *ngShow

3. 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?

medium

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

B. The message 'Welcome!' stays visible all the time.

C. The message 'Welcome!' disappears and never comes back.

D. The button click causes an error because showMessage is not defined.

Solution

1. 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.

2. 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.

3. Final Answer:

   The message 'Welcome!' disappears after first click and reappears after second click. -> Option A

4. Quick Check:

   Toggle true/false shows/hides message [OK]

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

Common Mistakes:

• Assuming message never reappears after hiding
• Thinking button click causes error
• Believing message is always visible

4. Consider this Angular template:

<div *ngIf="user.isLoggedIn">Hello, {{user.name}}!</div>

But the app crashes with an error: Cannot read property 'isLoggedIn' of undefined. What is the best fix?

medium

A. Remove the *ngIf directive completely.

B. Change to *ngIf="user?.isLoggedIn" to safely check property.

C. Initialize user as an empty object in the component.

D. Use *ngIf="user.isLoggedIn === true" instead.

Solution

1. Step 1: Identify cause of error

   The error occurs because user is undefined when Angular tries to read user.isLoggedIn.

2. Step 2: Use safe navigation operator

   Using user?.isLoggedIn prevents error by checking if user exists before accessing isLoggedIn.

3. Final Answer:

   Change to *ngIf="user?.isLoggedIn" to safely check property. -> Option B

4. Quick Check:

   Use ? to avoid errors on undefined objects [OK]

Hint: Use ?. to safely access nested properties [OK]

Common Mistakes:

• Removing *ngIf loses conditional rendering
• Initializing user empty but not fixing undefined timing
• Checking equality without safe navigation still errors

5. You want to display a message only if a user has a non-empty email property and is verified (isVerified true). Which *ngIf expression correctly handles this?

hard

A. *ngIf="user.email == '' && user.isVerified"

B. *ngIf="user.email || user.isVerified"

C. *ngIf="user.email && user.isVerified"

D. *ngIf="user.email.length > 0 || user.isVerified"

Solution

1. Step 1: Understand the condition requirements

   The message should show only if user.email is not empty (truthy) AND user.isVerified is true.

2. Step 2: Analyze each option

   *ngIf="user.email && user.isVerified" uses logical AND to require both conditions true. *ngIf="user.email || user.isVerified" uses OR, which is incorrect. *ngIf="user.email == '' && user.isVerified" checks for empty string which is opposite of requirement. *ngIf="user.email.length > 0 || user.isVerified" uses OR and length check but allows message if only one condition is true.

3. Final Answer:

   *ngIf="user.email && user.isVerified" -> Option C

4. Quick Check:

   Use AND (&&) to require both conditions true [OK]

Hint: Use && to require both conditions true [OK]

Common Mistakes:

• Using || instead of && allowing partial matches
• Checking for empty string instead of truthy value
• Using length without checking for undefined user