🎛️ Angular Component Inputs & Outputs – Dynamik mit Klarheit

(Wie du saubere, flexible Kommunikation zwischen Komponenten gestaltest)

Komponentenkommunikation ist das Herzstück moderner Frontend-Architektur.
Angular bietet dir mit @Input() und @Output() alles, was du brauchst –
wenn du es richtig strukturierst.

1️⃣ Inputs – Konfigurierbare Komponenten

@Input() title: string = '';

Nutze Inputs, um Komponenten kontextabhängig zu machen –
z. B. für Überschriften, IDs, Optionen, Modi usw.

✅ Best Practice: Nur primitive Datentypen oder Data Models

2️⃣ Outputs – Events bewusst feuern

@Output() clicked = new EventEmitter<void>();

handleClick() {
  this.clicked.emit();
}

✅ Events klar benennen (selected, submitted, changed)

3️⃣ Typisierung & Interfaces

@Input() user!: User;
@Output() update = new EventEmitter<Partial<User>>();

Nutze klare Typen für Transparenz & Lesbarkeit – gerade im Team.

4️⃣ Smart & Dumb Components

• Smart: Holt Daten, kennt Use Cases
• Dumb: Präsentiert nur – bekommt alles über @Input(), sendet alles über @Output()

✅ So erreichst du maximale Wiederverwendbarkeit

5️⃣ Bonus: Signals statt Outputs?

Angular 18+ bietet dir neue Wege:

const submitted = signal(false);

effect(() => {
  if (submitted()) {
    saveData();
  }
});

⚠️ Noch nicht überall sinnvoll – aber interessant für Reactive UIs

Fazit

Gute Komponentenkommunikation ist wie ein sauberes API-Design:
klar, typisiert und wartbar – das macht den Unterschied.

👉 Nächster Beitrag:
🌐 Angular Routing Advanced – Guards, Lazy Loading & Dynamic Routes