📦 Angular Directives Deep Dive – Struktur, Verhalten & Best Practices

(Wie du mit eigenen Direktiven deine App flexibel & mächtig machst)

Direktiven sind Angulars Power Tool, um DOM-Struktur und -Verhalten zu erweitern.
Ob eigene Struktur-Direktiven oder Attribute – du kannst fast alles bauen.

1️⃣ Attribute Directives – Verhalten verändern

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

✅ Direktiven für UI-Verhalten wie Highlighting, Tooltips, Loader-Logik u. v. m.

2️⃣ Structural Directives – DOM-Manipulation

@Directive({
  selector: '[appIfLoggedIn]'
})
export class IfLoggedInDirective {
  constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {
    if (userIsLoggedIn()) {
      view.createEmbeddedView(template);
    }
  }
}

✅ Für eigene *ngIf-artige Konstrukte – maximal flexibel!

3️⃣ Inputs in Direktiven

@Input('appHighlight') color = 'lightblue';

✅ Parameterisierbar machen – mehr Kontrolle, bessere Wiederverwendbarkeit

4️⃣ HostListener & HostBinding

@HostListener('mouseenter') onHover() {
  this.bgColor = 'orange';
}

@HostBinding('style.backgroundColor') bgColor = '';

✅ Interaktive & performante Logik direkt am Element

5️⃣ Direktiven modular & testbar halten

• Kein Service-Zugriff in der Directive (besser delegieren)
• Eher klein, fokussiert, testbar – wie Pipes
• In Shared Modules gruppieren

Fazit

Direktiven geben dir die Power, Angular gezielt zu erweitern, ohne Komplexität zu erzeugen.
Richtig genutzt, sind sie das Cleanest API, das du bauen kannst.

👉 Nächster Beitrag:
🧠 Angular Signals – Computed, Effect & Reactive Thinking