Smart vs Dumb

// SMART (container) : il sait D’OÙ viennent les données et CE QUI se passe lors d’une action.
@Component({
  selector: 'app-catalog-page',
  imports: [ProductFilters, ProductCard, CartSummary],
  providers: [CatalogStore], // le store vit aussi longtemps que la 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 (routée)
├── data-access/
│   ├── catalog-store.ts          ← état + données
│   └── catalog-api.ts
├── ui/                           ← DUMB, propre à la feature
│   ├── product-card.ts
│   ├── product-filters.ts
│   └── cart-summary.ts
└── models/
    └── product.ts                ← Product + toProduct(dto)

shared/ui/                        ← DUMB, générique (sans domaine)
├── button.ts
├── rating.ts
└── data-table.ts

// ✗ Un composant « dumb » qui est en réalité smart déguisé
@Component({ selector: 'app-product-card', /* ... */ })
export class ProductCard {
  private readonly cart = inject(CartStore);   // ← dépendance à l’état global
  private readonly http = inject(HttpClient);  // ← fait des requêtes
  private readonly router = inject(Router);    // ← décide de la 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']);
  }
}
// Conséquences : vous ne pouvez pas le réutiliser sur une autre page (par ex. dans les « recommandations » ou dans l’admin),
// vous ne pouvez pas le tester sans mocks pour HttpClient, Router et CartStore,
// et une liste de 50 cartes fait 50 requêtes.

// ✓ État d’UI local dans un composant dumb — parfaitement OK
export class Accordion {
  readonly items = input.required<Item[]>();
  protected readonly expanded = signal<number | null>(null); // concerne uniquement l’affichage
}

// ✓ Injections « UI » dans un composant dumb — OK
inject(ElementRef); inject(DestroyRef); inject(LOCALE_ID); inject(Dialog /* CDK */);