ngClass for dynamic classes in Angular - Mini Project: Build & Apply

Using ngClass for Dynamic Classes in Angular

📖 Scenario: You are building a simple Angular component that displays a list of tasks. Each task can be marked as completed or pending. You want to highlight completed tasks with a green background and pending tasks with a yellow background.

🎯 Goal: Create an Angular standalone component that uses ngClass to dynamically apply CSS classes based on each task's completion status.

📋 What You'll Learn

Create a list of tasks with exact names and completion status

Add a boolean variable to track if a task is completed

Use ngClass to apply CSS classes dynamically

Add CSS classes for completed and pending tasks

Use a standalone Angular component with signals and new control flow

💡 Why This Matters

🌍 Real World

Dynamic styling is common in real apps to show status, errors, or user actions visually. Using ngClass helps keep templates clean and maintainable.

💼 Career

Understanding ngClass and dynamic styling is essential for Angular developers to build interactive and accessible user interfaces.

1

Set up the tasks array

Create a standalone Angular component named TaskListComponent with a tasks array containing these exact objects: { name: 'Buy groceries', completed: false }, { name: 'Walk the dog', completed: true }, and { name: 'Read a book', completed: false }.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent {
  // Your code here
}

Hint

Define the tasks array exactly as shown inside the component class.

2

Add CSS classes for task status

Add a styles array to the @Component decorator with two CSS classes: .completed that sets background-color: lightgreen; and .pending that sets background-color: lightyellow;.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
  // Your code here
})
export class TaskListComponent {
  tasks = [
    { name: 'Buy groceries', completed: false },
    { name: 'Walk the dog', completed: true },
    { name: 'Read a book', completed: false }
  ];
}

Hint

Add the styles property inside the @Component decorator with the two CSS classes.

3

Use ngClass to apply dynamic classes

In the component's template, add an unordered list <ul>. Use *ngFor="let task of tasks" to loop over tasks. For each <li>, use [ngClass] to apply the class 'completed' if task.completed is true, otherwise apply 'pending'. Display the task's name inside the <li>.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    
  `,
  styles: [
    `.completed { background-color: lightgreen; }`,
    `.pending { background-color: lightyellow; }`
  ]
})
export class TaskListComponent {
  tasks = [
    { name: 'Buy groceries', completed: false },
    { name: 'Walk the dog', completed: true },
    { name: 'Read a book', completed: false }
  ];
}

Hint

Use *ngFor to loop and [ngClass] with a ternary expression to apply classes.

4

Add accessibility and finalize component

Add an aria-label attribute with value "Task list" to the <ul> element for accessibility. Also, add a tabindex="0" attribute to the <ul> to make it keyboard focusable.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    
      
      
        {{ task.name }}
      
    
  `,
  styles: [
    `.completed { background-color: lightgreen; }`,
    `.pending { background-color: lightyellow; }`
  ]
})
export class TaskListComponent {
  tasks = [
    { name: 'Buy groceries', completed: false },
    { name: 'Walk the dog', completed: true },
    { name: 'Read a book', completed: false }
  ];
}

Hint

Add aria-label="Task list" and tabindex="0" to the <ul> tag for accessibility.

Practice

1. What is the main purpose of ngClass in Angular?

easy

A. To add or remove CSS classes dynamically based on component data

B. To fetch data from a server

C. To create new Angular components

D. To handle user input events

Solution

1. Step 1: Understand what ngClass does

   ngClass is used to control CSS classes dynamically in Angular templates.

2. Step 2: Compare options with ngClass purpose

   Only To add or remove CSS classes dynamically based on component data describes adding or removing CSS classes dynamically, which matches ngClass functionality.

3. Final Answer:

   To add or remove CSS classes dynamically based on component data -> Option A

4. Quick Check:

   ngClass controls CSS classes dynamically = A [OK]

Hint: Remember: ngClass changes CSS classes dynamically [OK]

Common Mistakes:

• Confusing ngClass with event handling
• Thinking ngClass fetches data
• Mixing ngClass with component creation

2. Which of the following is the correct syntax to apply multiple classes dynamically using ngClass with an array?

easy

A. <div [ngClass]="class1, class2"></div>

B. <div [ngClass]="['class1', 'class2']"></div>

C. <div [ngClass]="{'class1': true, 'class2': false}"></div>

D. <div ngClass="class1 class2"></div>

Solution

1. Step 1: Identify array syntax for ngClass

   Using an array, classes are listed inside square brackets and quotes: ['class1', 'class2'].

2. Step 2: Check each option's syntax

   <div [ngClass]="['class1', 'class2']"></div> correctly uses [ngClass] with an array. <div ngClass="class1 class2"></div> is plain string without binding. <div [ngClass]="{'class1': true, 'class2': false}"></div> uses object syntax, not array. <div [ngClass]="class1, class2"></div> is invalid syntax.

3. Final Answer:

   <div [ngClass]="['class1', 'class2']"></div> -> Option B

4. Quick Check:

   Array syntax = ['class1', 'class2'] [OK]

Hint: Array syntax uses square brackets inside [ngClass] [OK]

Common Mistakes:

• Using string without binding for multiple classes
• Confusing object and array syntax
• Incorrect comma usage outside array

3. Given this component code:

isActive = true;
classes = { 'active': isActive, 'disabled': !isActive };

What classes will be applied in the template?
<div [ngClass]="classes">Content</div>

medium

A. The div will have both 'active' and 'disabled' classes

B. The div will have class 'disabled' only

C. The div will have class 'active' only

D. The div will have no classes

Solution

1. Step 1: Evaluate the classes object values

   isActive is true, so 'active': true, and 'disabled': !true = false.

2. Step 2: Determine which classes are applied

   Only keys with true values are applied. So only 'active' class is added.

3. Final Answer:

   The div will have class 'active' only -> Option C

4. Quick Check:

   True keys apply classes = A [OK]

Hint: Only true keys in object apply classes [OK]

Common Mistakes:

• Assuming false keys add classes
• Confusing boolean values with strings
• Thinking all keys apply regardless of value

4. Identify the error in this Angular template snippet:

<div [ngClass]="{active: isActive, disabled: !isActive}">Test</div>

Assuming isActive is a boolean property in the component.

medium

A. Property names in object must be quoted strings

B. Boolean values cannot be used in ngClass object

C. Square brackets should be removed from ngClass

D. The syntax is correct; no error

Solution

1. Step 1: Check object syntax in ngClass binding

   Angular allows unquoted property names in object literals inside templates.

2. Step 2: Verify boolean usage and binding syntax

   Boolean values are valid to conditionally apply classes. Square brackets are required for binding.

3. Final Answer:

   The syntax is correct; no error -> Option D

4. Quick Check:

   Object syntax with booleans is valid = B [OK]

Hint: Object keys can be unquoted in Angular templates [OK]

Common Mistakes:

• Thinking object keys must be quoted strings
• Removing square brackets breaks binding
• Believing booleans are invalid in ngClass

5. You want to apply the class 'highlight' only when score is above 80 and 'low-score' when it is below or equal to 80. Which ngClass binding correctly implements this logic?

hard

A. <div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div>

B. <div ngClass="score > 80 ? 'highlight' : 'low-score'"></div>

C. <div [ngClass]="['highlight', 'low-score']"></div>

D. <div [ngClass]="{highlight: score <= 80, 'low-score': score > 80}"></div>

Solution

1. Step 1: Analyze the condition for each class

   'highlight' applies if score > 80, 'low-score' applies if score <= 80.

2. Step 2: Check each option's logic

   <div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div> correctly maps conditions to classes in an object. <div ngClass="score > 80 ? 'highlight' : 'low-score'"></div> lacks property binding [ngClass], so the ternary is not evaluated (static string). <div [ngClass]="['highlight', 'low-score']"></div> applies both classes always. <div [ngClass]="{highlight: score <= 80, 'low-score': score > 80}"></div> reverses conditions incorrectly.

3. Final Answer:

   <div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div> -> Option A

4. Quick Check:

   Object with correct conditions = C [OK]

Hint: Use object syntax with conditions for multiple exclusive classes [OK]

Common Mistakes:

• Applying both classes always with array syntax
• Reversing condition logic
• Forgetting property binding [ngClass] for dynamic expressions