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
}

Need a 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
}

Need a 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
}

Need a 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;
  }
}

Need a hint?

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