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 von TaskListComponent

Wir erstellen eine Komponente, die für die Verwaltung der Aufgabenliste zuständig 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. Wir werden uns im nächsten Abschnitt genauer ansehen, 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 das Übergeben von Daten in eine Komponente sowie das Auslösen von Ereignissen aus einer Komponente heraus. Hier ein kurzer Überblick:

Hier ist ein Beispiel, 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 ihren Status umschaltet, sendet das TaskComponent Ereignisse, die vom übergeordneten Component empfangen werden.

@Output() und EventEmitter werden verwendet, um den übergeordneten Komponenten zu benachrichtigen, wenn im Kind etwas passiert. Diese Dekoratoren ermöglichen es der Kindkomponente, Aktionen wie das Löschen von Aufgaben oder Statusänderungen an die Elternkomponente zu kommunizieren.

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

Die Methode toggleTask() wechselt den Status der Aufgabe (abgeschlossen/nicht abgeschlossen) und informiert die 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 die Benutzeroberfläche automatisch 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.