ngClass for dynamic classes in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind a CSS class dynamically using ngClass.

Angular

<div [ngClass]="'[1]'">Hello World</div>

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

Aclass

Bactive

Cstyle

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names like 'class' or 'style' instead of class names.

Not using quotes around the class name string.

The ngClass directive expects a string or expression that evaluates to a class name or object. Here, "active" is a valid class name string.

2fill in blank

medium

Complete the code to apply multiple classes conditionally using ngClass with an object.

Angular

<div [ngClass]="{ 'highlight': isActive, [1] }">Content</div>

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

A'disabled': isDisabled

B'color': isColored

C'text': isText

D'style': isStyled

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid class names or property names.

Not using quotes around class names.

In ngClass, you can pass an object where keys are class names and values are booleans. Here, 'disabled': isDisabled adds the 'disabled' class if isDisabled is true.

3fill in blank

hard

Fix the error in the ngClass binding to correctly apply the class based on the condition.

Angular

<div [ngClass]="[1]">Example</div>

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

A"active: isActive"

B[ active: isActive ]

C( active: isActive )

D{ active: isActive }

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets or parentheses instead of curly braces.

Passing a string with colon inside instead of an object.

The correct syntax for conditional classes in ngClass is an object with class names as keys and boolean expressions as values, like { active: isActive }.

4fill in blank

hard

Fill both blanks to apply classes conditionally using ngClass with an object and a string.

Angular

<div [ngClass]="{ [1]: isError, '[2]' }">Message</div>

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

Aerror

Bwarning

Cinfo

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around class names.

Using invalid class names.

The first blank should be the class name 'error' applied when isError is true. The second blank is another class name 'warning' which can be used as a static class or part of the object.

5fill in blank

hard

Fill all three blanks to create a dynamic class binding using ngClass with an object and a string.

Angular

<div [ngClass]="{ [1]: isPrimary, [2]: isSecondary } '[3]'">Button</div>

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

Aprimary

Bsecondary

Cextra-class

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around class names.

Not separating the object and string properly.

The first two blanks are class names used as keys in the object with boolean conditions. The third blank is a string with an extra static class applied always.