Direktiven sind eine der grundlegenden Bausteine in Angular und ermöglichen es Entwicklern, das DOM (Document Object Model) zu manipulieren und benutzerdefinierte Verhaltensweisen in einer Anwendung zu definieren. In Angular gibt es zwei Haupttypen von Direktiven: strukturierende Direktiven und Attribut-Direktiven. Dieser Artikel bietet einen Überblick über die eingebauten Angular-Direktiven und erklärt, wie man sie zur Manipulation von DOM-Elementen verwenden kann.
Was sind Direktiven in Angular?
Eine Direktive in Angular ist eine Klasse, die das Verhalten oder Aussehen eines DOM-Elements verändern kann. Sie wird über einen Decorator definiert und kann auf HTML-Elemente angewendet werden, um deren Eigenschaften oder Struktur zu beeinflussen.
Es gibt drei Arten von Direktiven in Angular:
- Komponenten: Komponenten sind im Wesentlichen Direktiven mit einer eigenen Vorlage (Template).
- Strukturierende Direktiven: Diese ändern die Struktur des DOM, indem sie Elemente hinzufügen oder entfernen.
- Attribut-Direktiven: Diese ändern das Aussehen oder Verhalten von DOM-Elementen, ohne deren Struktur zu beeinflussen.
Strukturierende Direktiven
Strukturierende Direktiven ändern die Struktur des DOM, indem sie Elemente basierend auf bestimmten Bedingungen hinzufügen oder entfernen. Die beiden häufigsten strukturierenden Direktiven in Angular sind `*ngIf` und `*ngFor`.
1. `*ngIf` – Bedingtes Rendern
Die Direktive `*ngIf` wird verwendet, um ein Element basierend auf einer Bedingung ein- oder auszublenden. Wenn die Bedingung als `true` ausgewertet wird, wird das Element im DOM hinzugefügt. Wenn die Bedingung `false` ist, wird das Element entfernt.
Beispiel:
export class AppComponent {
isLoggedIn = true;
}Im HTML-Template:
<p *ngIf="isLoggedIn">Willkommen zurück, Benutzer!</p>In diesem Beispiel wird der Text nur angezeigt, wenn die Variable `isLoggedIn` auf `true` gesetzt ist.
2. `*ngFor` – Iterieren über eine Liste
Die Direktive `*ngFor` wird verwendet, um über eine Liste von Elementen zu iterieren und für jedes Element im Array ein DOM-Element zu erzeugen.
Beispiel:
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
}Im HTML-Template:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>In diesem Beispiel wird eine Liste (`<ul>`) von Listenelementen (`<li>`) erzeugt, wobei jedes Listenelement den entsprechenden Wert des Arrays `items` anzeigt.
3. `*ngSwitch` – Mehrere Bedingungen
Mit der `*ngSwitch`-Direktive kann man mehrere Bedingungen prüfen und unterschiedliche Inhalte basierend auf dem Ergebnis anzeigen.
Beispiel:
export class AppComponent {
status = 'loading';
}Im HTML-Template:
<div [ngSwitch]="status">
<p *ngSwitchCase="'loading'">Die Daten werden geladen...</p>
<p *ngSwitchCase="'success'">Daten erfolgreich geladen!</p>
<p *ngSwitchDefault>Unbekannter Status</p>
</div>In diesem Beispiel wird der angezeigte Text abhängig vom Wert der Variable `status` geändert.
Attribut-Direktiven
Attribut-Direktiven ändern das Aussehen oder Verhalten eines DOM-Elements. Im Gegensatz zu strukturierenden Direktiven ändern sie nicht die Struktur des DOM, sondern beeinflussen das vorhandene Element. Zu den wichtigsten eingebauten Attribut-Direktiven gehören `ngClass` und `ngStyle`.
1. `ngClass` – Dynamische Klassenzuweisung
Die Direktive `ngClass` ermöglicht es, CSS-Klassen dynamisch basierend auf bestimmten Bedingungen anzuwenden.
Beispiel:
export class AppComponent {
isActive = true;
}Im HTML-Template:
<p [ngClass]="{ 'active': isActive, 'inactive': !isActive }">Dieser Text hat dynamische Klassen</p>In diesem Beispiel wird die CSS-Klasse `active` auf das `<p>`-Element angewendet, wenn `isActive` `true` ist. Andernfalls wird die Klasse `inactive` hinzugefügt.
2. `ngStyle` – Dynamische Stile
Die Direktive `ngStyle` wird verwendet, um Stile dynamisch auf ein Element anzuwenden. Sie funktioniert ähnlich wie `ngClass`, jedoch mit Inline-Styles anstelle von CSS-Klassen.
Beispiel:
export class AppComponent {
color = 'blue';
}Im HTML-Template:
<p [ngStyle]="{ 'color': color }">Dieser Text hat eine dynamische Farbe</p>In diesem Beispiel wird die Textfarbe des `<p>`-Elements auf den Wert der `color`-Variable gesetzt, in diesem Fall `blue`.
Eigene Direktiven erstellen
Neben den eingebauten Direktiven können Entwickler auch benutzerdefinierte Direktiven erstellen, um wiederverwendbare Funktionen in ihrer Anwendung zu kapseln. Eine benutzerdefinierte Attribut-Direktive kann beispielsweise verwendet werden, um DOM-Elemente in Echtzeit zu überwachen und zu manipulieren.
Hier ist ein einfaches Beispiel für eine benutzerdefinierte Direktive, die die Hintergrundfarbe eines Elements ändert, wenn der Benutzer mit der Maus darüber fährt:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}In diesem Beispiel wird die benutzerdefinierte Direktive `HighlightDirective` erstellt, die die Hintergrundfarbe eines Elements ändert, wenn der Benutzer die Maus darüber bewegt.
Um diese Direktive in einer Komponente zu verwenden, wird sie einfach als Attribut zu einem HTML-Element hinzugefügt:
<p appHighlight>Fahre mit der Maus über diesen Text, um die Hintergrundfarbe zu ändern.</p>Fazit
Direktiven in Angular bieten eine leistungsstarke Möglichkeit, das DOM zu manipulieren und dynamische, interaktive Benutzeroberflächen zu erstellen. Durch die Verwendung von strukturierenden Direktiven wie `*ngIf` und `*ngFor` können Entwickler die Struktur der Anwendung dynamisch anpassen, während Attribut-Direktiven wie `ngClass` und `ngStyle` das Aussehen und Verhalten von Elementen verändern. Mit der Möglichkeit, benutzerdefinierte Direktiven zu erstellen, bietet Angular Entwicklern maximale Flexibilität, um ihre Anwendungen nach ihren individuellen Anforderungen zu gestalten.
