Categories page for the storefront
Angular · Angular · beginner · greenfield
Adds the categories page: fetches the list on init into a signal and renders it with the new control flow, with an empty state while loading. Follows the standalone-component conventions.
Requirements
- Load the categories from CatalogService when the page initializes.
- Show the empty state only until they arrive.
- Follow the codebase convention: standalone components, signals for state.
Files touched
- src/app/pages/categories/categories.ts
--- src/app/pages/categories/categories.ts
+import { Component, signal } from '@angular/core';
+import { CatalogService, Category } from '../../services/catalog.service';
+
+@Component({
+ selector: 'app-categories',
+ template: `
+ @if (categories().length) {
+ <ul>
+ @for (c of categories(); track c.id) {
+ <li>{{ c.name }}</li>
+ }
+ </ul>
+ } @else {
+ <p class="empty">No categories yet.</p>
+ }
+ `,
+})
+export class CategoriesPage {
+ categories = signal<Category[]>([]);
+
+ constructor(private catalog: CatalogService) {}
+
+ ngOnInIt(): void {
+ this.catalog.getCategories().subscribe((list) => this.categories.set(list));
+ }
+}