Smart vs. Dumb

// SMART (Container): weiß, WOHER die Daten kommen und WAS bei einer Aktion passiert.
@Component({
  selector: 'app-catalog-page',
  imports: [ProductFilters, ProductCard, CartSummary],
  providers: [CatalogStore], // der Store lebt so lange wie die Seite
  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 (geroutet)
├── data-access/
│   ├── catalog-store.ts          ← Zustand + Daten
│   └── catalog-api.ts
├── ui/                           ← DUMB, featurespezifisch
│   ├── product-card.ts
│   ├── product-filters.ts
│   └── cart-summary.ts
└── models/
    └── product.ts                ← Product + toProduct(dto)

shared/ui/                        ← DUMB, generisch (ohne Domäne)
├── button.ts
├── rating.ts
└── data-table.ts

// ✗ Eine „Dumb“-Komponente, die in Wahrheit eine verkappte Smart-Komponente ist
@Component({ selector: 'app-product-card', /* ... */ })
export class ProductCard {
  private readonly cart = inject(CartStore);   // ← Abhängigkeit von globalem Zustand
  private readonly http = inject(HttpClient);  // ← sendet Requests
  private readonly router = inject(Router);    // ← entscheidet über die 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']);
  }
}
// Folgen: Du kannst sie nicht auf einer anderen Seite wiederverwenden (z. B. in „Empfehlungen“ oder im Admin-Bereich),
// du kannst sie nicht ohne Mocks für HttpClient, Router und CartStore testen,
// und eine Liste mit 50 Karten sendet 50 Requests.

// ✓ Lokaler UI-Zustand in einer Dumb-Komponente — völlig in Ordnung
export class Accordion {
  readonly items = input.required<Item[]>();
  protected readonly expanded = signal<number | null>(null); // betrifft nur die Darstellung
}

// ✓ „UI“-Injektionen in einer Dumb-Komponente — in Ordnung
inject(ElementRef); inject(DestroyRef); inject(LOCALE_ID); inject(Dialog /* CDK */);