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 "Abgeschlossen" zu "Rückgängig") und eine weitere zum Löschen der Aufgabe. Hier ist die HTML-Struktur, die verwendet wird:

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

Komponentenimplementierung

Unsere Komponente arbeitet mit einem Task-Objekt, das Informationen über die Aufgabe speichert, wie z. B. deren 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. Wir können einen ternären Operator verwenden, um den Button-Text basierend auf dem Wert von task.completed anzupassen.

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

Wenn task.completed auf true gesetzt ist, wird im Button-Text "Undo" angezeigt, andernfalls "Complete". Auf diese Weise passt sich der Button-Text dynamisch an den aktuellen Zustand der task an.

Dynamische Klassen mit Property Binding hinzufügen

Nun fügen wir die Möglichkeit hinzu, das Aussehen der Aufgabe basierend auf ihrem Status zu ändern. Wir verwenden Property Binding, um eine CSS-Klasse bedingt anzuwenden:

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

Das bedeutet: Wenn task.completed true ist, 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 ich oben beschrieben habe.

Ereignisbindung an Buttons

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

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

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

Dazu erstellen wir zwei Methoden in der TaskComponent:

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 wir noch keine Aufgabenliste haben, aus der Elemente entfernt werden können;

• 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 der Buttons auszuführen, müssen wir sie an die Klick-Events der Buttons binden. Wir verwenden dazu das Event Binding mit dem click-Event, um auf Klicks auf die Buttons zu reagieren und die entsprechenden Methoden aufzurufen.

In diesem Beispiel ermöglicht das Event Binding die Verknüpfung von Benutzeraktionen mit Komponentenmethoden. Die „Abschließen“ / „Rückgängig“-Schaltfläche ruft die Methode toggleTask() auf, die den Zustand 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 „Löschen“-Schaltfläche 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 Aufgabenkomponente 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.