ngStyle for dynamic styles in Angular - Mini Project: Build & Apply

Dynamic Styling with ngStyle in Angular

📖 Scenario: You are building a simple Angular component that changes the style of a message dynamically based on user interaction. This is common in real-world apps where styles need to update without reloading the page.

🎯 Goal: Create an Angular standalone component that uses ngStyle to apply dynamic styles to a message. The styles will change based on a configuration variable.

📋 What You'll Learn

Create a standalone Angular component named DynamicStyleComponent.

Define a message string property with the text 'Welcome to dynamic styling!'.

Create a configuration object called styleConfig with CSS properties for color and font size.

Use ngStyle in the template to apply styleConfig to the message paragraph.

Add a button that toggles the color between 'blue' and 'green' dynamically.

💡 Why This Matters

🌍 Real World

Dynamic styling is common in web apps to provide visual feedback, highlight important information, or adapt UI based on user actions without reloading the page.

💼 Career

Understanding ngStyle and dynamic styling is essential for Angular developers to build interactive and user-friendly interfaces.

1

Create the Angular component and message

Create a standalone Angular component named DynamicStyleComponent. Inside the component class, create a public string property called message and set it to 'Welcome to dynamic styling!'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-style',
  standalone: true,
  template: ``,
})
export class DynamicStyleComponent {
  // Your code here
}

Hint

Use message = 'Welcome to dynamic styling!' inside the component class.

2

Add a style configuration object

Inside the DynamicStyleComponent class, create a public object called styleConfig with two properties: color set to 'blue' and fontSize set to '1.5rem'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-style',
  standalone: true,
  template: ``,
})
export class DynamicStyleComponent {
  message = 'Welcome to dynamic styling!';
  // Your code here
}

Hint

Define styleConfig as an object with color and fontSize properties.

3

Use ngStyle to apply styles in the template

In the component's template, add a paragraph element that displays the message. Use the Angular directive [ngStyle] to bind the styleConfig object to the paragraph's styles.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-style',
  standalone: true,
  template: `
    
  `,
})
export class DynamicStyleComponent {
  message = 'Welcome to dynamic styling!';
  styleConfig = {
    color: 'blue',
    fontSize: '1.5rem'
  };
}

Hint

Use [ngStyle]="styleConfig" on the paragraph to apply styles dynamically.

4

Add a button to toggle the text color dynamically

Add a button below the paragraph in the template with the text Toggle Color. In the component class, create a method called toggleColor() that switches styleConfig.color between 'blue' and 'green'. Bind the button's (click) event to this method.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-style',
  standalone: true,
  template: `
    {{ message }}
    
  `,
})
export class DynamicStyleComponent {
  message = 'Welcome to dynamic styling!';
  styleConfig = {
    color: 'blue',
    fontSize: '1.5rem'
  };
  // Your code here
}

Hint

Create a toggleColor() method that changes styleConfig.color between 'blue' and 'green'. Bind it to the button's click event.

Practice

1. What does the Angular directive ngStyle do?

easy

A. It dynamically applies CSS styles to an element based on an object.

B. It adds classes to an element based on a condition.

C. It binds HTML attributes to an element.

D. It listens to user events like clicks.

Solution

1. Step 1: Understand the purpose of ngStyle

   ngStyle is used to bind an object containing CSS styles to an element dynamically.

2. Step 2: Compare with other directives

   Unlike ngClass which adds/removes classes, ngStyle directly sets inline styles.

3. Final Answer:

   It dynamically applies CSS styles to an element based on an object. -> Option A

4. Quick Check:

   ngStyle = dynamic CSS styles [OK]

Hint: Remember: ngStyle changes styles, ngClass changes classes [OK]

Common Mistakes:

• Confusing ngStyle with ngClass
• Thinking ngStyle listens to events
• Believing ngStyle binds HTML attributes

2. Which of the following is the correct syntax to apply ngStyle in a template?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall the correct binding syntax

   ngStyle expects an object inside square brackets with key-value pairs for styles.

2. Step 2: Check each option

   correctly uses an object with keys and values inside curly braces and quotes for keys with hyphens.

3. Final Answer:

   <div [ngStyle]="{color: 'red', 'font-weight': 'bold'}"></div> -> Option B

4. Quick Check:

   ngStyle = object in square brackets [OK]

Hint: Use square brackets and an object literal for ngStyle [OK]

Common Mistakes:

• Using string instead of object for ngStyle
• Missing square brackets for binding
• Not quoting CSS property names with hyphens

3. Given this component code:

color = 'blue';
isBold = true;

What will be the rendered style of this element?

<div [ngStyle]="{'color': color, 'font-weight': isBold ? 'bold' : 'normal'}">Text</div>

medium

A. Text with default color and normal font weight

B. Text with blue color and normal font weight

C. Text with default color and bold font weight

D. Text with blue color and bold font weight

Solution

1. Step 1: Evaluate the color binding

   The variable color is 'blue', so the style 'color' will be 'blue'.

2. Step 2: Evaluate the font-weight binding

   isBold is true, so the ternary expression returns 'bold'.

3. Final Answer:

   Text with blue color and bold font weight -> Option D

4. Quick Check:

   color=blue and font-weight=bold [OK]

Hint: Check variable values and ternary results carefully [OK]

Common Mistakes:

• Ignoring ternary condition result
• Assuming default styles instead of bound values
• Mixing up true/false in ternary

4. Identify the error in this Angular template snippet:

<div [ngStyle]="{color: color, fontWeight: 'bold'}">Hello</div>

Assuming color is a string variable in the component.

medium

A. The CSS property 'fontWeight' should be quoted as 'font-weight'.

B. The variable 'color' is not defined in the component.

C. ngStyle cannot bind to multiple styles at once.

D. The syntax is correct; no error.

Solution

1. Step 1: Check CSS property naming in ngStyle

   CSS properties with hyphens must be quoted as strings in the object keys, e.g., 'font-weight'.

2. Step 2: Analyze the given code

   The key fontWeight is camelCase and unquoted, which Angular does not convert automatically in ngStyle.

3. Final Answer:

   The CSS property 'fontWeight' should be quoted as 'font-weight'. -> Option A

4. Quick Check:

   CSS keys with hyphens need quotes in ngStyle [OK]

Hint: Quote CSS keys with hyphens in ngStyle object [OK]

Common Mistakes:

• Using camelCase keys without quotes for CSS properties
• Assuming ngStyle accepts unquoted hyphenated keys
• Thinking ngStyle only accepts single style

5. You want to change the background color of a button dynamically based on a component variable isActive. Which ngStyle binding correctly applies a green background when active and gray when inactive?

hard

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Understand CSS property naming in ngStyle

   CSS properties with hyphens must be quoted as strings, e.g., 'background-color'.

2. Step 2: Check the ternary expression syntax

   Values must be strings, so 'green' and 'gray' need quotes.

3. Step 3: Evaluate each option

   Click me correctly quotes the CSS property and string values. Click me uses camelCase without quotes, which is invalid. Click me quotes the key incorrectly as camelCase. Click me misses quotes around color strings.

4. Final Answer:

   <button [ngStyle]="{'background-color': isActive ? 'green' : 'gray'}">Click me</button> -> Option C

5. Quick Check:

   Quote CSS keys and string values in ngStyle [OK]

Hint: Quote CSS keys with hyphens and string values in ngStyle [OK]

Common Mistakes:

• Using camelCase keys without quotes
• Forgetting quotes around color strings
• Mixing camelCase and hyphenated keys incorrectly