💡 Angular Direktiven – Magie mit Struktur und Verhalten

(Strukturdirektiven, Attributdirektiven & die Kunst des DOM-Manipulierens)

Direktiven sind in Angular viel mehr als nur *ngIf und *ngFor.
Sie sind die unsichtbare Superpower, mit der du Verhalten, Design und Struktur kontrollierst.

1️⃣ Arten von Direktiven

Typ	Beschreibung
Komponenten	Direktiven mit Template
Attribut-Direktive	Verändert Aussehen/Verhalten eines DOM-Elements
Struktur-Direktive	Fügt Elemente zum DOM hinzu oder entfernt sie dynamisch

2️⃣ Attribut-Direktive selbst schreiben

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

Verwendung im Template:

<p appHighlight>Ich bin gehighlightet!</p>

3️⃣ Struktur-Direktive mit TemplateRef

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Verwendung:

<p *appUnless="isLoggedIn">Bitte einloggen!</p>

4️⃣ Built-In Direktiven verstehen

*ngIf, *ngFor, ngClass, ngStyle, ngSwitch
viele davon sind syntactic sugar für Strukturlogik
unter der Haube: TemplateRef + ViewContainerRef

5️⃣ Best Practices

✅ Namen wie appCustomFeature für Klarheit
✅ Logik auslagern, keine schweren Operationen in Direktiven
✅ Nur verwenden, wenn wirklich sinnvoll – sonst lieber Komponenten

Fazit

Direktiven geben dir in Angular volle Kontrolle über das DOM.
Ob Verhalten, Styling oder Sichtbarkeit – du entscheidest, wann und wie.

📚 Nächster Beitrag:
🧰 Angular Pipes – Saubere Darstellung statt Logik im Template