📐 Component Architecture in Angular – Patterns für skalierbare Komponenten

Kleine Komponenten. Große Wirkung.
Wenn du Angular im großen Stil einsetzt, brauchst du eine klare UI-Architektur.

In diesem Beitrag zeige ich dir:

• Wie du Komponenten strukturierst
• Welche Patterns sich in der Praxis bewährt haben
• Und wie du Skalierbarkeit & Klarheit kombinierst

🎯 Ziel: Komponenten, die skalieren

✅ Klarer Zweck
✅ Gute Trennung von Logik und Darstellung
✅ Testbarkeit
✅ Wiederverwendbarkeit

🧱 Der Klassiker: Smart vs. Dumb Components

🧠 Smart (Container)

• Verstehen Business-Logik
• Rufen Use Cases auf
• Leiten Daten weiter

@Component({
  selector: 'app-user-page',
  template: `<app-user-view [user]="user()" />`
})
export class UserPageComponent {
  user = toSignal(this.getUser.execute('123'));
}

🎨 Dumb (Presentational)

• Nur @Input() & @Output()
• Kein Service, kein API-Call
• Volle Wiederverwendbarkeit

@Component({
  selector: 'app-user-view',
  template: `<p>{{ user.name }}</p>`
})
export class UserViewComponent {
  @Input() user!: User;
}

🧩 Weitere bewährte Patterns

🔌 Entry Components

@Component({
  selector: 'app-modal',
  standalone: true,
  imports: [CommonModule]
})
export class ModalComponent {}

➡ Für Lazy Loading & dynamisches Rendern per ViewContainerRef

🧰 UI Building Blocks

Bau dir wiederverwendbare Komponenten:

• <app-button>
• <app-card>
• <app-avatar>
• <app-icon>

➡ Einheitliches Design, zentrale Pflege, weniger Duplikate

📦 Feature Shell Pattern (z. B. mit Nx)

Struktur:

libs/
├── feature-dashboard/
│   ├── dashboard.component.ts
│   └── + children
├── ui-dashboard-card/
├── ui-dashboard-header/

➡ Trennung von Layout, Features und Logik

⚠️ Don'ts

• ❌ *ngIf="user && user.name && user.address?.street" – lieber mit @if oder Input-Guards
• ❌ Logik in Presentational Component (z. B. HTTP)
• ❌ Komponenten mit 5+ Responsibilities

✅ Fazit

Komponentenarchitektur ist kein Selbstzweck – sie entscheidet über:

• Lesbarkeit
• Testbarkeit
• Erweiterbarkeit

Mach’s wie die Profis: klein, klar, wiederverwendbar.

📍 Bald im Blog: 🌍 Internationalisierung (i18n) richtig gemacht – Angular + Übersetzungsstrategie