*ngIf for conditional rendering in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the *ngIf directive do in Angular?

*ngIf conditionally adds or removes elements from the DOM based on a true or false expression.

beginner

How do you write *ngIf to show a message only when isLoggedIn is true?

<div *ngIf="isLoggedIn">Welcome back!</div>

beginner

What happens to the element when the *ngIf condition is false?

The element is completely removed from the DOM, not just hidden.

intermediate

How can you provide an else block with *ngIf?

Use *ngIf="condition; else elseBlock" and define a <ng-template #elseBlock> for the else content.

intermediate

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

Because *ngIf removes elements from the DOM, improving performance and accessibility, while display:none only hides them visually.

What does *ngIf="false" do to the element?

A Removes it from the DOM

B Hides it with CSS

C Shows it normally

D Throws an error

*ngIf removes the element from the DOM when the condition is false.

How do you add an else block with *ngIf?

A *ngIf="condition" elseBlock

B *ngIfElse="elseBlock"

C *ngIfElseBlock="true"

D *ngIf="condition; else elseBlock" with <ng-template #elseBlock>

The correct syntax uses *ngIf="condition; else elseBlock" and an <ng-template> with the else block.

Which of these is true about *ngIf?

A It toggles element visibility with CSS

B It adds or removes elements from the DOM

C It only works on <code>&lt;div&gt;</code> elements

D It requires a function to work

*ngIf adds or removes elements from the DOM based on the condition.

What happens if you use *ngIf on a component?

A The component is created or destroyed based on the condition

B The component is always created but hidden

C The component throws an error

D The component duplicates

*ngIf controls whether the component is created or destroyed in the DOM.

Why might *ngIf improve accessibility?

A Because it disables keyboard navigation

B Because it changes font size automatically

C Because hidden elements are still read by screen readers

D Because it adds ARIA labels

Elements removed by *ngIf are not read by screen readers, unlike hidden elements with CSS.

Explain how *ngIf works for showing or hiding content in Angular.

Think about what happens to the element in the page structure.

Describe how to use an else block with *ngIf and why it might be useful.

Consider how you show something when the condition is false.