Sie haben sich bereits mit den grundlegenden Arten der Datenbindung vertraut gemacht. Schauen wir uns nun an, wie diese in der Praxis beim Arbeiten mit der TaskComponent angewendet werden.

Aufgabenstruktur

Unsere Task-Komponente zeigt den Aufgabentitel sowie zwei Schaltflächen an: eine zum Ändern des Aufgabenstatus (von "Complete" zu "Undo") und eine weitere zum Löschen der Aufgabe. Hier ist die verwendete HTML-Struktur:

Die Styles wurden bereits definiert. Sie können diese überprüfen, indem Sie zur Datei style.css wechseln.

Komponentenimplementierung

Unsere Komponente arbeitet mit einem Aufgabenobjekt, das Informationen über die Aufgabe speichert, wie id, title und den Status completed. Wir definieren dieses Objekt innerhalb der Komponentenklasse:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Wir können diese Daten im HTML-Template der Komponente anzeigen.

Verwendung von Komponentendaten im Template

Um Daten aus dem task-Objekt anzuzeigen, referenzieren wir dessen Eigenschaften direkt im Template. Zum Beispiel, um den Titel der Aufgabe anzuzeigen:

<div class="task-title">{{ task.title }}</div>

Wenn die Aufgabe abgeschlossen ist, sollte sich der Text des Buttons ändern. Ein ternärer Operator kann verwendet werden, um den Button-Text basierend auf dem Wert von task.completed anzupassen.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Wenn task.completed den Wert true hat, wird im Button-Text „Undo“ angezeigt, andernfalls „Complete“. Dadurch passt sich der Button-Text dynamisch an den aktuellen Zustand der task an.

Hinzufügen dynamischer Klassen mit Property Binding

Nun wird die Möglichkeit ergänzt, das Erscheinungsbild der Aufgabe abhängig von ihrem Status zu ändern. Hierzu wird Property Binding verwendet, um eine CSS-Klasse bedingt anzuwenden:

<div class="task" [class.completed]="task.completed">

Das bedeutet: Ist task.completed true, wird die Klasse completed dem Element hinzugefügt. Andernfalls wird die Klasse nicht angewendet.

Dadurch ändert sich das visuelle Erscheinungsbild, sobald die Aufgabe abgeschlossen ist: Der Text wird durchgestrichen, die Farbe wird grau und der Hintergrund hellgrau. Alle diese Stile sind in der CSS-Klasse .completed definiert, die oben beschrieben wurde.

Ereignisbindung an Buttons

Nun werden Ereignisse an die Buttons gebunden, sodass die entsprechenden Aktionen ausgeführt werden, wenn die Buttons angeklickt werden. Es gibt zwei Buttons:

• Der „Abschließen“ / „Rückgängig“-Button — beim Anklicken wird der Abschlussstatus der Aufgabe umgeschaltet;

• Der „Löschen“-Button — beim Anklicken wird die Aufgabe gelöscht.

Dazu werden zwei Methoden in der TaskComponent erstellt:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• Die Methode deleteTask() bleibt vorerst leer, da noch keine Aufgabenliste zum Entfernen von Einträgen vorhanden ist;

• Die Methode toggleTask() schaltet einfach den Wert von task.completed um. Ist die Aufgabe als abgeschlossen (true) markiert, wird sie als nicht abgeschlossen (false) markiert und umgekehrt.

Um diese Methoden beim Klicken auf die Schaltflächen auszuführen, müssen sie an die Klick-Ereignisse der Schaltflächen gebunden werden. Hierzu wird das Event Binding mit dem click-Ereignis verwendet, um auf Klicks auf die Schaltflächen zu reagieren und die entsprechenden Methoden aufzurufen.

In diesem Beispiel ermöglicht das Event Binding die Verknüpfung von Benutzeraktionen mit Komponentenmethoden. Die Schaltfläche „Abschließen“ / „Rückgängig“ ruft die Methode toggleTask() auf, die den Status von task.completed umschaltet. Dadurch ändert sich auch der Text der Schaltfläche von „Abschließen“ zu „Rückgängig“ abhängig vom Status der Aufgabe.

Die Schaltfläche „Löschen“ ruft die Methode deleteTask() auf, die derzeit noch nicht implementiert ist, da das Löschen von Aufgaben später hinzugefügt wird.

Damit ist das Template für unsere einfache Aufgaben-Komponente vollständig umgesetzt. So sieht die Komponente aus:

Die Komponente stellt die Daten bereit, und das Template sorgt für die visuelle Darstellung. Gemeinsam schaffen sie eine interaktive und benutzerfreundliche Aufgabenoberfläche, in der Daten angezeigt werden, das Erscheinungsbild sich verändert und die Schaltflächen sich an den Status der Aufgabe anpassen.