ngStyle for dynamic styles in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind a dynamic background color using ngStyle.

Angular

<div [ngStyle]="{'background-color': [1]">Colored Box</div>

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

Acolor

BbackgroundColor

C'red'

DbgColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a CSS property name instead of the variable.

Putting the color value directly without quotes or variable.

The variable bgColor holds the dynamic color value used in ngStyle.

2fill in blank

medium

Complete the code to apply multiple dynamic styles using ngStyle.

Angular

<div [ngStyle]="[1]">Styled Text</div>

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

A{'font-size.px': fontSize, 'color': textColor}

B'font-size.px: fontSize, color: textColor'

C[fontSize, textColor]

DfontSize + textColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object.

Using an array instead of an object.

ngStyle expects an object with style properties as keys and their values. The correct syntax uses curly braces and property-value pairs.

3fill in blank

hard

Fix the error in the ngStyle binding to correctly apply a dynamic width.

Angular

<div [ngStyle]="{'width': [1] + 'px'}">Box</div>

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

A'widthValue'

BwidthValue

CwidthValue + 'px'

DwidthValuepx

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the variable name inside quotes making it a string literal.

Trying to concatenate inside the string key.

The variable widthValue should be used without quotes inside the expression. The string concatenation happens outside the binding.

4fill in blank

hard

Fill both blanks to set dynamic height and background color using ngStyle.

Angular

<div [ngStyle]="{'height.px': [1], 'background-color': [2]">Box</div>

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

AboxHeight

BbgColor

C'blue'

DheightValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using string literals instead of variables.

Mixing variable names between height and color.

Use boxHeight for height and bgColor for background color variables from the component.

5fill in blank

hard

Fill all three blanks to create a dynamic style object with font size, color, and margin.

Angular

<p [ngStyle]="{'font-size.px': [1], 'color': [2], 'margin.px': [3]">Text</p>

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

AfontSize

BtextColor

CmarginSize

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names.

Confusing margin with padding.

Use fontSize, textColor, and marginSize variables to set the respective styles dynamically.