In diesem Stadium kann unsere Anwendung bereits eine Liste von Aufgaben anzeigen und eine Nachricht einblenden, wenn keine Aufgaben vorhanden sind. Den Nutzern fehlt jedoch noch die Möglichkeit, neue Aufgaben einzugeben.

Wir werden die Möglichkeit hinzufügen, eine neue Aufgabe über einen praktischen Button und ein modales Formular zu erstellen.

Wir implementieren:

• Einen stilvollen Add-Button;

• Ein modales Fenster mit einem Eingabefeld für den Aufgabentitel;

• Die Logik zum Hinzufügen einer Aufgabe zur Liste im TaskService;

• Automatische Generierung einer eindeutigen Kennung.

Einstieg

Zunächst müssen wir unseren TaskService erweitern, damit er neue Aufgaben erstellen und speichern kann. Der Service soll nicht nur Aufgaben speichern, sondern auch die gesamte damit verbundene Geschäftslogik übernehmen.

Wir werden eine Methode addTask im Service erstellen. Die Generierung einer eindeutigen ID, das Erstellen des Aufgabenobjekts und das Speichern in der Liste erfolgen alle innerhalb des Service. Die Methode erhält lediglich einen title, der aus der TaskListComponent übergeben wird.

Die Methode addTask() nimmt nur den Aufgabentitel entgegen und erstellt das Task-Objekt intern. Zunächst wird die maximale ID unter den vorhandenen Aufgaben ermittelt und anschließend um 1 erhöht, um eine eindeutige Kennung zu generieren. Die neue Aufgabe wird immer als unvollständig (completed: false) gesetzt und sofort zum tasks-Array hinzugefügt.

Dieser Ansatz entfernt unnötige Logik aus der Komponente und macht den Service sowohl eigenständig als auch wiederverwendbar.

Aktualisierung der TaskListComponent

Da nun die gesamte Logik zur Erstellung einer neuen Aufgabe in den Service verschoben wurde, ist die Komponente nur noch dafür verantwortlich, Benutzereingaben zu empfangen, den Aufgabentitel an den Service zu übergeben und die lokale Aufgabenliste zu aktualisieren. Dieser Ansatz vereinfacht die Komponente und zentralisiert die Geschäftslogik im TaskService.

Innerhalb der Komponente werden zwei Variablen hinzugefügt:

• showAddTask — ein Flag, das die Sichtbarkeit des Modalfensters zum Hinzufügen einer Aufgabe steuert;

• newTaskTitle — ein String, der die Benutzereingabe für den Aufgabentitel speichert.

Außerdem wird die Methode addTask() implementiert, die:

1. Überprüft, dass der Eingabestring nicht leer ist;

2. Den Aufgabentitel an die Methode addTask(title: string) des Services übergibt;

3. Die lokale Aufgabenliste aktualisiert;

4. Das Eingabefeld leert und das Modalfenster schließt.

Die Methode addTask() ist jetzt so einfach wie möglich: Sie kümmert sich nur um die Benutzerinteraktion und übergibt die gesamte Geschäftslogik an den Service. Dadurch wird der Code wartungsfreundlicher und leichter zu testen.

Stellen Sie außerdem sicher, dass das FormsModule in Ihrem Modul importiert ist, da es für das Two-Way Data Binding mit newTaskTitle erforderlich ist.

Hinzufügen-Button und modales Fenster

Fügen wir nun den UI-Teil hinzu: den Hinzufügen-Button und das HTML-Markup für das modale Fenster, das das Eingabefeld und die Schaltflächen enthält.

Wenn der Benutzer auf die Schaltfläche Add klickt, wird die Variable showAddTask auf true gesetzt und das Modal-Fenster erscheint. Das Eingabefeld ist über newTaskTitle an die Variable [(ngModel)] gebunden, und die Schaltflächenaktionen speichern entweder die Aufgabe oder schließen das Modal ohne Änderungen.

Benutzer können bequem Aufgaben über ein modales Formular hinzufügen. Die neue Aufgabe erscheint sofort in der Liste, ohne dass die Seite neu geladen werden muss.

Wir haben nun Interaktivität implementiert, die unsere Anwendung funktionsreich und benutzerfreundlich für den täglichen Gebrauch macht.