Why performance tuning matters in Angular - See It in Action

Why performance tuning matters

📖 Scenario: You are building a simple Angular app that shows a list of products. The list can get very long, so performance tuning is important to keep the app fast and smooth.

🎯 Goal: Create a basic Angular component that displays a list of products. Then add a configuration to limit how many products show at once. Finally, implement a simple filter to only show products with a price above a certain value. This will demonstrate why performance tuning matters by controlling how much data the app handles.

📋 What You'll Learn

Create an Angular standalone component named ProductListComponent

Initialize a list of exactly 6 products with name and price

Add a variable minPrice to filter products by price

Use an Angular *ngFor directive to display filtered products

Add a simple input to change minPrice dynamically

💡 Why This Matters

🌍 Real World

Filtering and limiting data shown in a user interface is common in real apps to keep them fast and responsive.

💼 Career

Understanding how to tune performance by controlling data flow and rendering is a key skill for Angular developers working on scalable applications.

1

Set up the product list data

Create a standalone Angular component called ProductListComponent. Inside it, create a variable products that is an array of objects with these exact entries: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, { name: 'Tablet', price: 450 }, { name: 'Monitor', price: 300 }, { name: 'Keyboard', price: 100 }, { name: 'Mouse', price: 50 }.

Angular

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

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

Need a hint?

Remember to use products = [ ... ] inside the component class with the exact product objects.

2

Add a minimum price filter variable

Inside the ProductListComponent class, add a variable called minPrice and set it to 0. This will be used to filter products by price.

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: 450 },
    { name: 'Monitor', price: 300 },
    { name: 'Keyboard', price: 100 },
    { name: 'Mouse', price: 50 }
  ];
  // Add minPrice variable here
  // Your code here
}

Need a hint?

Just add minPrice = 0; inside the component class.

3

Filter products by minimum price in the template

In the component's template, use an Angular *ngFor directive to loop over products filtered by minPrice. Only show products where product.price >= minPrice. Display each product's name and price inside a <li> element.

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: 450 },
    { name: 'Monitor', price: 300 },
    { name: 'Keyboard', price: 100 },
    { name: 'Mouse', price: 50 }
  ];
  minPrice = 0;
}

Need a hint?

Use *ngFor="let product of products.filter(product => product.price >= minPrice)" inside the <li> tag.

4

Add input to change minimum price dynamically

Add an <input> element above the product list in the template. Bind its value to minPrice using Angular's two-way binding syntax [(ngModel)]. This allows the user to change minPrice and see the filtered products update live. Also, add FormsModule to the component's imports.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [FormsModule],
  template: `
    
    
       product.price >= minPrice)">
        {{ product.name }} - ${{ product.price }}
      
    
  `
})
export class ProductListComponent {
  products = [
    { name: 'Laptop', price: 1200 },
    { name: 'Phone', price: 800 },
    { name: 'Tablet', price: 450 },
    { name: 'Monitor', price: 300 },
    { name: 'Keyboard', price: 100 },
    { name: 'Mouse', price: 50 }
  ];
  minPrice = 0;
  // Your code here
}

Need a hint?

Import FormsModule and add it to imports. Then add an <input> with [(ngModel)]="minPrice" and an aria-label for accessibility.