*ngIf for conditional rendering in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show the paragraph only if isVisible is true.

Angular

<p *[1]="isVisible">This text is conditionally visible.</p>

Drag options to blanks, or click blank then click option'

AngFor

BngShow

CngSwitch

DngIf

Attempts:

3 left

💡 Hint

Common Mistakes

Using *ngShow which is not an Angular directive.

Using *ngFor which is for loops, not conditions.

The *ngIf directive in Angular conditionally includes or excludes an element based on the expression. Here, it shows the paragraph only if isVisible is true.

2fill in blank

medium

Complete the code to display the message only when user.isLoggedIn is true.

Angular

<div *[1]="user.isLoggedIn">Welcome back!</div>

Drag options to blanks, or click blank then click option'

AngFor

BngClass

CngIf

DngSwitchCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using *ngFor which is for repeating elements.

Using *ngClass which is for styling, not rendering.

*ngIf checks the condition and renders the element only if user.isLoggedIn is true.

3fill in blank

hard

Fix the error in the code to conditionally show the button when showButton is true.

Angular

<button *[1]="showButton">Click me</button>

Drag options to blanks, or click blank then click option'

AngIf

BngShow

CngRepeat

DngSwitch

Attempts:

3 left

💡 Hint

Common Mistakes

Using *ngShow which is from other frameworks.

Using *ngRepeat which is not Angular.

The correct directive for conditional rendering is *ngIf. *ngShow and *ngRepeat are not valid Angular directives.

4fill in blank

hard

Fill both blanks to show the div only if isAdmin is true and add a CSS class highlight.

Angular

<div *[1]="isAdmin" [class.[2]]="isAdmin">Admin Panel</div>

Drag options to blanks, or click blank then click option'

AngIf

BngClass

Chighlight

DngShow

Attempts:

3 left

💡 Hint

Common Mistakes

Using *ngShow which is not Angular.

Confusing directive names and class names.

*ngIf conditionally renders the div. The [class.highlight] adds the CSS class highlight when isAdmin is true.

5fill in blank

hard

Fill all three blanks to display a message only if user.isActive is true, show the username, and add a CSS class active-user.

Angular

<p *[1]="user.isActive" [class.[2]]="user.isActive">Hello, [3]</p>

Drag options to blanks, or click blank then click option'

AngIf

Bactive-user

Cuser.name

DngShow

Attempts:

3 left

💡 Hint

Common Mistakes

Using *ngShow which is not Angular.

Forgetting to use interpolation for the username.

*ngIf conditionally renders the paragraph. The [class.active-user] adds the CSS class when user.isActive is true. The interpolation {{user.name}} shows the username.