Add a Top rated filter to the product grid
Angular · Angular · beginner · greenfield
Adds the Top rated toggle to the product grid: a checkbox that narrows the list to products rated 4.0+, derived with a computed signal so the list updates instantly. Off by default; the empty state is handled. Tested with the toggle on and off against the seeded catalogue and the highly-rated products filter through as expected.
The storefront's product grid. Ratings come from the reviews service as one-decimal averages; '4.0+' is the merchandising team's official definition of top rated.
Requirements
- The product grid gets a "Top rated" toggle: when enabled, only products with an average rating of 4.0 or higher are shown. The boundary is inclusive — the label reads "4.0+" and a product rated exactly 4.0 counts as top rated.
- Ratings are store-computed averages between 0.0 and 5.0 with exactly one decimal place.
- With the toggle off, all products are shown. If the filter matches nothing, show the empty message.
Files touched
- src/app/catalog/product-grid.component.ts
--- src/app/catalog/product-grid.component.ts
+import { Component, computed, input, signal } from '@angular/core';
+
+export interface Product {
+ id: string;
+ name: string;
+ rating: number; // average rating, 0.0-5.0, one decimal
+ reviewCount: number;
+}
+
+const TOP_RATED_MIN = 4.0;
+
+/**
+ * Product grid with a "Top rated" filter: products rated 4.0 or higher.
+ */
+@Component({
+ selector: 'app-product-grid',
+ standalone: true,
+ template: `
+ <section class="products" aria-label="Products">
+ <label class="top-rated-toggle">
+ <input
+ type="checkbox"
+ [checked]="showTopRated()"
+ (change)="showTopRated.set(!showTopRated())"
+ />
+ Top rated (4.0+)
+ </label>
+ <ul class="product-list">
+ @for (product of visible(); track product.id) {