Filter the shipments list by status
Angular · Angular · advanced · greenfield
Adds client-side status filtering to the shipments list: a signal for the selected status, a computed for the visible rows, and an @empty block for filters that match nothing. The filter recomputes automatically when either the selection or the shipments input changes.
Requirements
- Add status filter buttons above the shipments list — one per status value plus an 'all' option, labelled with the status values themselves; clicking one shows only shipments with that status.
- 'all' is the initial selection and shows every shipment.
- The active filter button must be visually marked and its state exposed to assistive technology; an empty filter result shows a friendly empty message.
- The filtered view must stay in sync when the shipments input changes, and the input array must not be mutated.
Files touched
- src/app/shipments/shipment-filter.component.ts
--- src/app/shipments/shipment-filter.component.ts
+import { Component, computed, input, signal } from '@angular/core';
+
+export interface Shipment {
+ id: string;
+ reference: string;
+ status: 'pending' | 'shipped' | 'delivered';
+}
+
+type StatusFilter = 'all' | Shipment['status'];
+
+@Component({
+ selector: 'app-shipment-filter',
+ standalone: true,
+ template: `
+ <nav class="filters">
+ @for (option of options; track option) {
+ <button
+ type="button"
+ [class.active]="status() === option"
+ [attr.aria-pressed]="status() === option"
+ (click)="status.set(option)"
+ >
+ {{ option }}
+ </button>
+ }
+ </nav>
+ <ul class="shipments">
+ @for (shipment of visible(); track shipment.id) {
+ <li>{{ shipment.reference }} — {{ shipment.status }}</li>