Angular Directive Composition API einfach erklärt

🔥 Was ist die Directive Composition API?

Die Directive Composition API ist ein neues Feature in Angular, mit dem du wiederverwendbare Direktiven direkt in Komponenten einbinden kannst – ganz ohne Template-Overhead.

Das bedeutet: Du kannst eine oder mehrere Direktiven direkt im TypeScript deiner Komponente angeben, und Angular übernimmt den Rest.

🧩 Warum ist das nützlich?

Stell dir vor, du hast eine Dropdown-Komponente und eine Tooltip-Direktive. Du willst beide auf ein Element anwenden? Kein Problem:

• Früher: Du musstest im Template menuBehavior und tooltip manuell hinzufügen.
• Jetzt: Du bindest beide einfach direkt über hostDirectives ein.

✅ Beispiel: Eine Direktive einbinden

Schritt 1 – Die Direktive definieren

@Directive({ 
  selector: '[menuBehavior]', 
  standalone: true,
  host: { '(click)': 'toggleMenu()' }
})
export class MenuBehavior {
  @Input() menuId = '';
  @Output() menuClosed = new EventEmitter<void>();

  toggleMenu() {
    // Logik hier
  }
}

Schritt 2 – Die Direktive in der Komponente verwenden

@Component({
  selector: 'admin-menu',
  standalone: true,
  templateUrl: './admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['menuId: id'],
    outputs: ['menuClosed: closed'],
  }]
})
export class AdminMenu {}

Jetzt kannst du die Komponente so verwenden:

<admin-menu id="main-menu" (closed)="onClosed()"></admin-menu>

🔁 Komposition von Direktiven

Du kannst sogar mehrere Direktiven miteinander kombinieren:

@Directive({
  standalone: true,
  hostDirectives: [TooltipDirective, MenuBehavior],
})
export class MenuWithTooltip {}

Und wiederverwenden:

@Directive({
  standalone: true,
  hostDirectives: [MenuWithTooltip],
})
export class FancyMenu {}

So baust du dir eine Verkettung wiederverwendbarer UI-Logik auf.

⚙️ Reihenfolge der Ausführung

Angular führt Host-Direktiven immer zuerst aus:

1. Konstruktor der Direktive
2. Lifecycle-Hooks (ngOnInit)
3. Host-Bindings (z. B. (click))

Erst danach folgt die eigentliche Komponente.

🤝 Dependency Injection

• Deine Komponente kann Host-Direktiven injizieren
• Host-Direktiven können auch die Komponente injizieren
• Bei Konflikten gewinnt die Komponente (ihre Provider haben Vorrang)

🛑 Einschränkungen

• Nur statisch (nicht zur Laufzeit änderbar)
• Host-Direktiven müssen standalone sein
• Die selector-Angabe wird ignoriert

📦 Fazit

Die Directive Composition API ist eine elegante Möglichkeit, Verhalten wiederverwendbar zu kapseln – ohne das HTML zu überladen. Ideal für modulare, skalierbare Angular-Apps.

Tipp: Nutze sie für wiederkehrende Logik wie Tooltips, Dropdowns, Keyboard-Navigation, usw.