Build a signal-driven filtered list with stable row identity

• 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.