Reactive Array Filtering and Multi-Criteria Sorting Using Signals

import { Component, signal, computed } from '@angular/core';
 
export interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}
 
@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `<!-- Template renders sortedProducts() -->`
})
export class ProductListComponent {
  readonly products = signal<Product[]>([
    { id: 1, name: 'Desk', price: 250, category: 'Furniture' },
    { id: 2, name: 'Chair', price: 120, category: 'Furniture' },
    { id: 3, name: 'Mouse', price: 45, category: 'Electronics' }
  ]);
  
  readonly selectedCategory = signal<string>('Furniture');
  readonly sortDirection = signal<'asc' | 'desc'>('asc');
 
  readonly sortedProducts = computed(() => {
    const category = this.selectedCategory();
    const direction = this.sortDirection();
    
    return this.products()
      .filter(item => item.category === category)
      .toSorted((a, b) => direction === 'asc' ? a.price - b.price : b.price - a.price);
  });
}