Benutzerdefinierte Direktiven in Angular

Mit Direktiven können Sie HTML erweitern. In dieser Lektion lernen Sie benutzerdefinierte Direktiven kennen und erfahren, wie Sie eigene erstellen.

Was ist eine Direktive?

Direktiven verändern das Aussehen oder Verhalten von DOM-Elementen. Angular stellt integrierte Direktiven wie *ngIf und *ngFor bereit.

Arten von Direktiven

• Komponenten-Direktiven
• Attributdirektiven – verändern das Aussehen oder Verhalten
• Strukturelle Direktiven – verändern die Struktur (z. B. *ngIf)

Eine Attributdirektive erstellen

Erstellen Sie eine Direktive mit Angular CLI:

ng generate directive highlight

ng generate directive highlight

Die Direktive anwenden

Verwenden Sie Ihre Direktive als Attribut in Ihrer Vorlage:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Direktivenlogik

Direktiven enthalten Logik, die DOM-Elemente verändert. Sie können beispielsweise die Hintergrundfarbe dynamisch festlegen.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

@HostListener-Dekorator

Verwenden Sie @HostListener, um auf Ereignisse von Elementen mit Ihrer Direktive zu reagieren:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() in Direktiven

Mit @Input() können Sie Daten aus Vorlagen an Direktiven übergeben:

@Input() defaultColor: string;

Zusammenfassung

Sie haben gelernt, wie Sie benutzerdefinierte Direktiven erstellen und verwenden, um Ihre Angular-Apps zu erweitern. Gut gemacht!