Performance impact of change detection in Angular - Mini Project: Build & Apply

Performance Impact of Change Detection in Angular

📖 Scenario: You are building a simple Angular app that displays a list of products with their prices. You want to understand how Angular's change detection affects performance when updating the UI.

🎯 Goal: Create an Angular standalone component that shows a list of products. Add a button to update the price of one product. Observe how Angular's default change detection updates the view.

📋 What You'll Learn

Create a standalone Angular component named ProductListComponent.

Initialize a products array with exact objects: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, { name: 'Tablet', price: 600 }.

Add a variable updatedPrice set to 1000.

Implement a method updatePrice() that changes the price of the first product to updatedPrice.

Add a button in the template that calls updatePrice() when clicked.

Display the list of products with their names and prices using *ngFor.

💡 Why This Matters

🌍 Real World

This project simulates a product price list in an online store where prices can change dynamically. Understanding change detection helps keep the UI fast and responsive.

💼 Career

Knowing how Angular's change detection works is essential for frontend developers to optimize app performance and build smooth user experiences.

1

Set up the products array

Create a standalone Angular component named ProductListComponent. Inside it, create a products array with these exact objects: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, and { name: 'Tablet', price: 600 }.

Angular

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

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

Hint

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

2

Add updatedPrice variable

Inside the ProductListComponent class, add a variable called updatedPrice and set it to 1000.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: ``,
})
export class ProductListComponent {
  products = [
    { name: 'Laptop', price: 1200 },
    { name: 'Phone', price: 800 },
    { name: 'Tablet', price: 600 }
  ];

  // Add updatedPrice variable here
  // Your code here
}

Hint

Just add a new variable updatedPrice inside the class and assign it 1000.

3

Implement updatePrice method

Add a method called updatePrice() inside ProductListComponent that sets the price of the first product in products to the value of updatedPrice.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: ``,
})
export class ProductListComponent {
  products = [
    { name: 'Laptop', price: 1200 },
    { name: 'Phone', price: 800 },
    { name: 'Tablet', price: 600 }
  ];

  updatedPrice = 1000;

  // Add updatePrice() method here
  // Your code here
}

Hint

Define a method updatePrice() that changes the first product's price to updatedPrice.

4

Add template with button and product list

In the component's template, add a button with (click)="updatePrice()" that says 'Update Price'. Below it, use *ngFor="let product of products" to display each product's name and price inside a <div>.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    
  `,
})
export class ProductListComponent {
  products = [
    { name: 'Laptop', price: 1200 },
    { name: 'Phone', price: 800 },
    { name: 'Tablet', price: 600 }
  ];

  updatedPrice = 1000;

  updatePrice() {
    this.products[0].price = this.updatedPrice;
  }
}

Hint

Use a button with (click)="updatePrice()" and a <div> with *ngFor to show product names and prices.

Practice

1. What is the main purpose of Angular's change detection?

easy

A. To manage routing between pages

B. To compile TypeScript code

C. To handle user authentication

D. To update the view when data changes

Solution

1. Step 1: Understand change detection role

   Change detection in Angular watches for data changes to update the screen accordingly.

2. Step 2: Identify the correct purpose

   Updating the view when data changes matches the role of change detection.

3. Final Answer:

   To update the view when data changes -> Option D

4. Quick Check:

   Change detection updates view [OK]

Hint: Change detection updates the screen on data change [OK]

Common Mistakes:

• Confusing change detection with routing
• Thinking it compiles code
• Mixing it with authentication

2. Which syntax correctly sets the change detection strategy to OnPush in an Angular component?

easy

A. @Component({ detectionStrategy: OnPush })

B. @Component({ changeDetection: ChangeDetectionStrategy.Default })

C. @Component({ changeDetection: ChangeDetectionStrategy.OnPush })

D. @Component({ changeDetectionStrategy: 'OnPush' })

Solution

1. Step 1: Recall correct property name

   The property to set change detection is 'changeDetection' inside @Component decorator.

2. Step 2: Use correct enum value

   The enum value for OnPush is ChangeDetectionStrategy.OnPush, not a string or other property name.

3. Final Answer:

   @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) -> Option C

4. Quick Check:

   Use changeDetection with ChangeDetectionStrategy.OnPush [OK]

Hint: Use changeDetection: ChangeDetectionStrategy.OnPush exactly [OK]

Common Mistakes:

• Using wrong property name like detectionStrategy
• Passing 'OnPush' as string
• Confusing Default with OnPush

3. Given this Angular component with OnPush strategy:

  @Component({
    selector: 'app-counter',
    template: `{{ counter }}`,
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class CounterComponent {
    @Input() counter = 0;
  }

What happens if the parent updates counter by setting the same number value again?

medium

A. The component view updates because input changed

B. The component view does not update because value is unchanged

C. Angular throws an error due to OnPush

D. The component view updates only after manual detectChanges call

Solution

1. Step 1: Understand OnPush behavior with inputs

   OnPush triggers change detection only if input references change or events occur.

2. Step 2: Same primitive value means no change

   Setting the same number value again does not change the input reference or value.

3. Final Answer:

   The component view does not update because value is unchanged -> Option B

4. Quick Check:

   OnPush skips unchanged input values [OK]

Hint: OnPush skips updates if input value unchanged [OK]

Common Mistakes:

• Assuming view always updates on input set
• Thinking OnPush causes errors
• Believing manual detectChanges is always needed

4. You have an Angular component using Default change detection. The component updates slowly. Which fix improves performance?

medium

A. Switch to OnPush change detection strategy

B. Remove all @Input properties

C. Use setTimeout to delay updates

D. Disable change detection entirely

Solution

1. Step 1: Identify performance issue cause

   Default strategy checks all components frequently, which can slow large apps.

2. Step 2: Apply OnPush to reduce checks

   OnPush limits checks to when inputs change or events happen, improving speed.

3. Final Answer:

   Switch to OnPush change detection strategy -> Option A

4. Quick Check:

   OnPush improves performance by fewer checks [OK]

Hint: Use OnPush to reduce unnecessary checks [OK]

Common Mistakes:

• Removing inputs breaks data flow
• Using setTimeout doesn't fix detection speed
• Disabling detection breaks UI updates

5. In a large Angular app, you want to optimize change detection. You have a parent component with Default strategy and a child with OnPush. The parent updates a complex object property but mutates it instead of replacing it. What is the impact on the child component's view update?

hard

A. Child view does not update because OnPush checks object reference

B. Child view updates because parent changed object property

C. Child view updates only if detectChanges is called manually

D. Child view updates automatically regardless of mutation

Solution

1. Step 1: Understand OnPush and object mutation

   OnPush triggers on input reference changes, not internal mutations.

2. Step 2: Mutation keeps same object reference

   Mutating object property does not change the reference, so OnPush skips update.

3. Step 3: Child view remains unchanged without manual trigger

   Without new reference or manual detection, child view won't update.

4. Final Answer:

   Child view does not update because OnPush checks object reference -> Option A

5. Quick Check:

   OnPush needs new object reference to update [OK]

Hint: OnPush tracks object references, not internal mutations [OK]

Common Mistakes:

• Assuming mutation triggers update
• Thinking child updates automatically
• Forgetting manual detectChanges option