Wie sind sie verbunden?

Die TaskListComponent verwaltet ein Array von Aufgaben, wobei jede Aufgabe ein Objekt mit den Feldern id, title und completed ist. Zur Anzeige jeder Aufgabe verwenden wir die TaskComponent.

Zusätzlich kommuniziert die TaskComponent mit ihrer übergeordneten Komponente über Benutzeraktionen, wie das Löschen oder das Markieren einer Aufgabe als erledigt. Diese Interaktion erfolgt durch das Auslösen von Ereignissen.

Implementierung der Logik der TaskListComponent

Wir erstellen eine Komponente, die für die Verwaltung der Aufgabenliste verantwortlich ist. Darin definieren wir ein Array von Aufgaben und fügen außerdem zwei Methoden hinzu — deleteTask() und toggleStatus() — um die Aufgabenverwaltung zu steuern.

• Die Aufgabenliste (tasks) wird innerhalb der Komponente verwaltet, wodurch TaskListComponent als zentrale Steuerung fungiert;
• Die Methode deleteTask() filtert die Aufgabe anhand ihrer id heraus;
• Die Methode toggleStatus() sucht die Aufgabe anhand der id und wechselt deren completed-Status.

Dieser Code verwendet die Direktive *ngFor, um durch das Array tasks zu iterieren und für jede Aufgabe eine TaskComponent zu erstellen. Im nächsten Abschnitt betrachten wir genauer, wie *ngFor funktioniert.

• [task]="task" — übergibt die aktuelle Aufgabe an die Kindkomponente, damit sie angezeigt werden kann;

• (onDelete)="deleteTask($event)" — hört auf das onDelete-Event der Kindkomponente und ruft deleteTask() auf, um die Aufgabe zu entfernen;

• (onToggle)="toggleStatus($event)" — hört auf das onToggle-Event und ruft toggleStatus() auf, um den Status der Aufgabe zu ändern.

Dekoratoren: @Input() und @Output()

Nun ist es an der Zeit, die TaskComponent mit der TaskListComponent zu verbinden. Dafür verwenden wir die Dekoratoren @Input() und @Output().

In Angular sind die Dekoratoren @Input() und @Output() zentrale Werkzeuge für die Kommunikation zwischen Komponenten. Sie ermöglichen es, Daten in eine Komponente zu übergeben und Ereignisse aus einer Komponente herauszugeben. Hier ein kurzer Überblick:

Hier ist ein Beispiel dafür, wie sie im TaskComponent funktionieren:

In unserem Fall ist task das Objekt, das vom übergeordneten TaskListComponent an das TaskComponent übergeben wird.

Wenn der Benutzer eine Aufgabe löscht oder deren Status umschaltet, sendet das TaskComponent Ereignisse, die vom übergeordneten Component empfangen werden.

@Output() und EventEmitter werden verwendet, um den Elternkomponenten mitzuteilen, wenn im Kindkomponenten etwas passiert. Diese Dekoratoren ermöglichen es dem Kindkomponenten, Aktionen wie das Löschen von Aufgaben oder Statusänderungen an den Eltern weiterzugeben.

Die Methode deleteTask() wird aufgerufen, wenn der Benutzer eine Aufgabe löschen möchte. Sie gibt die id der Aufgabe aus, sodass der Elternkomponente die Aufgabe aus seiner Liste entfernen kann.

Die Methode toggleTask() wechselt den Status der Aufgabe (abgeschlossen/nicht abgeschlossen) und informiert den Elternkomponente über diese Änderung.

Wie alles zusammen funktioniert

1. TaskListComponent übergibt eine Aufgabe an TaskComponent mittels @Input();

2. Der Benutzer interagiert mit der Aufgabe (z. B. durch Klicken auf "Löschen");

3. TaskComponent sendet ein Ereignis (onDelete oder onToggle) mit der id der Aufgabe;

4. TaskListComponent fängt das Ereignis ab und aktualisiert die Aufgabenliste;

5. Angular aktualisiert automatisch die Benutzeroberfläche basierend auf den neuen Daten.

So ermöglichen @Input() und @Output() eine saubere, effiziente Kommunikation zwischen Komponenten und sorgen für eine organisierte und reaktive Struktur.