ngClass for dynamic classes in Angular - Step-by-Step Execution

Concept Flow - ngClass for dynamic classes

Component Template

↓

Evaluate ngClass Expression

↓

Determine Classes to Add

↓

Update DOM Element Classes

↓

Render Updated Styles

Angular reads the ngClass expression, decides which CSS classes to add or remove, updates the element's class list, and then the browser shows the new styles.

Execution Sample

Angular

component.ts:
  isActive = true;

component.html:
  <div [ngClass]="{ 'active-class': isActive, 'inactive-class': !isActive }">Status</div>

This code adds 'active-class' if isActive is true, otherwise adds 'inactive-class' to the div.

Execution Table

Step	isActive Value	ngClass Expression	Classes Added	Classes Removed	Rendered Output
1	true	{ 'active-class': true, 'inactive-class': false }	active-class	inactive-class	Div has active-class style
2	false	{ 'active-class': false, 'inactive-class': true }	inactive-class	active-class	Div has inactive-class style
3	true	{ 'active-class': true, 'inactive-class': false }	active-class	inactive-class	Div has active-class style again
4	false	{ 'active-class': false, 'inactive-class': true }	inactive-class	active-class	Div has inactive-class style again

💡 No more changes in isActive, ngClass updates stop.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
isActive	true	true	false	true	false

Key Moments - 2 Insights

Why does the div switch classes when isActive changes?

Because ngClass watches the isActive value and adds or removes classes accordingly, as shown in execution_table steps 1 and 2.

What happens if both conditions in ngClass are true?

Both classes would be added, but usually conditions are set to avoid overlap. The execution_table shows only one class added per step.

Visual Quiz - 3 Questions

Look at the execution table at Step 2. Which class is added to the div?

A active-class

B both active-class and inactive-class

C inactive-class

D no class added

💡 Hint

Check the 'Classes Added' column for Step 2 in the execution_table.

At which step does isActive become false for the first time?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'isActive Value' column in the execution_table and variable_tracker.

If isActive stayed true all the time, what would happen to the classes?

A inactive-class would always be added

B active-class would always be added

C Both classes would toggle every step

D No classes would be added

💡 Hint

Refer to the execution_table rows where isActive is true and see which class is added.

Concept Snapshot

ngClass lets you add or remove CSS classes dynamically.
Use it with an object: keys are class names, values are conditions.
Angular updates classes when conditions change.
This changes the element's style without manual DOM manipulation.

Full Transcript

This visual execution shows how Angular's ngClass directive dynamically adds or removes CSS classes based on component variables. The example toggles the isActive boolean. When true, 'active-class' is added; when false, 'inactive-class' is added instead. The execution table tracks each step's isActive value, the ngClass expression evaluation, which classes are added or removed, and the resulting style on the div. The variable tracker shows how isActive changes over time. Key moments clarify why classes switch and what happens if conditions overlap. The quiz tests understanding of class changes and variable states. This helps beginners see how ngClass controls styling reactively and visually.

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