Build a signal-driven filtered list with stable row identity

Implement a standalone ProductList that receives products through a required signal input. Users can filter by text and select one row. Derive visible products and the selected product without copying them into effects. Use stable identity in the template, show an accessible empty state, and clear selection when the selected product no longer exists in the current input.

Products: [Keyboard, Mouse, Monitor]
Query: "mo"       -> Mouse, Monitor
Selected: Mouse; parent removes Mouse -> selection becomes empty
Query: "zzz"      -> "No products match your search"

• Use a required signal input for the product collection.
• Keep only user-owned state writable: query and selected ID.
• Derive filtered rows and selected product with computed.
• Track rows by product ID, not object reference or index.
• Use a real label and button semantics for keyboard access.

1. Create writable signals for the query and selected ID.
2. Normalize the query once inside a computed filtered-list derivation.
3. Resolve selection against the current input so removed products do not remain selected.
4. Render with @for and track product.id, plus an @empty state.
5. Test filtering, selection, parent replacement, removal, and keyboard activation.

import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';

type Product = {id: string; name: string};

@Component({
  selector: 'app-product-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <label for="product-search">Filter products</label>
    <input id="product-search"
      [value]="query()"
      (input)="query.set($any($event.target).value)" />

    <ul>
      @for (product of visibleProducts(); track product.id) {
        <li>
          <button type="button"
            [attr.aria-pressed]="selectedId() === product.id"
            (click)="selectedId.set(product.id)">
            {{ product.name }}
          </button>
        </li>
      } @empty {
        <li>No products match your search.</li>
      }
    </ul>
  `,
})
export class ProductList {
  readonly products = input.required<readonly Product[]>();
  readonly query = signal('');
  readonly selectedId = signal<string | null>(null);

  readonly visibleProducts = computed(() => {
    const query = this.query().trim().toLocaleLowerCase();
    return query
      ? this.products().filter(p => p.name.toLocaleLowerCase().includes(query))
      : this.products();
  });

  readonly selectedProduct = computed(() =>
    this.products().find(p => p.id === this.selectedId()) ?? null,
  );
}

Each filter recomputation is O(n) over the products and selection lookup is O(n). Rendering reuses rows by stable ID, so unchanged products keep their DOM identity.

• Whitespace-only input behaves like no filter.
• Replacing the input with new objects that keep the same IDs preserves row identity.
• A selected product removed by the parent resolves to no selected product.
• Duplicate IDs violate the component contract and should be rejected upstream or during development.

• Replace the input array with equivalent new objects and verify selection still resolves by ID.
• Remove the selected product and verify stale details are not displayed.
• Filter to no results and verify the empty text is visible.
• Verify row buttons expose pressed state and work from the keyboard.

• An effect that copies filtered rows creates two sources of truth.
• Tracking by index reuses the wrong row after insertion or sorting.
• Storing the selected object keeps a stale reference after parent replacement.
• A clickable list item without button semantics breaks keyboard behavior.