Smart vs Dumb

// SMART (container): it knows WHERE the data comes from and WHAT happens on an action.
@Component({
  selector: 'app-catalog-page',
  imports: [ProductFilters, ProductCard, CartSummary],
  providers: [CatalogStore], // the store lives as long as the page
  template: `
    <app-product-filters [categories]="categories" [(query)]="store.query" [(category)]="store.category" />

    @for (p of store.products.value(); track p.id) {
      <app-product-card [product]="p" (addToCart)="store.add($event)" />
    }

    <app-cart-summary
      [lines]="store.cart()" [count]="store.cartCount()" [total]="store.cartTotal()"
      (remove)="store.remove($event)" />
  `,
})
export class CatalogPage {
  protected readonly store = inject(CatalogStore);
  protected readonly categories: ProductCategory[] = ['laptop', 'phone', 'audio', 'accessory'];
}

features/catalog/
├── catalog.routes.ts
├── pages/
│   └── catalog-page.ts          ← SMART (routed)
├── data-access/
│   ├── catalog-store.ts          ← state + data
│   └── catalog-api.ts
├── ui/                           ← DUMB, specific to the feature
│   ├── product-card.ts
│   ├── product-filters.ts
│   └── cart-summary.ts
└── models/
    └── product.ts                ← Product + toProduct(dto)

shared/ui/                        ← DUMB, generic (no domain)
├── button.ts
├── rating.ts
└── data-table.ts

// ✗ A “dumb” component that is really smart in disguise
@Component({ selector: 'app-product-card', /* ... */ })
export class ProductCard {
  private readonly cart = inject(CartStore);   // ← dependency on global state
  private readonly http = inject(HttpClient);  // ← makes requests
  private readonly router = inject(Router);    // ← decides the navigation

  readonly productId = input.required<number>();
  readonly product = httpResource<Product>(() => `/api/products/${this.productId()}`);

  add() {
    this.cart.add(this.product.value()!);
    this.router.navigate(['/cart']);
  }
}
// Consequences: you can’t reuse it on another page (e.g. in “recommendations” or in admin),
// you can’t test it without mocks for HttpClient, Router and CartStore,
// and a list of 50 cards makes 50 requests.

// ✓ Local UI state in a dumb component — perfectly OK
export class Accordion {
  readonly items = input.required<Item[]>();
  protected readonly expanded = signal<number | null>(null); // only about the display
}

// ✓ “UI” injections in a dumb component — OK
inject(ElementRef); inject(DestroyRef); inject(LOCALE_ID); inject(Dialog /* CDK */);