Auf der Hauptseite unserer App sieht der Benutzer eine Liste aller Aufgaben. Dies ermöglicht einen schnellen Überblick darüber, was erledigt werden muss.

Doch was ist, wenn der Benutzer die Details einer bestimmten Aufgabe sehen möchte – ihre eindeutige ID, den genauen Titel und den Status? Dafür benötigen wir eine separate Seite für die Aufgabendetails.

In diesem Kapitel erfahren Sie, wie Sie die TaskDetailsComponent erstellen, die sich öffnet, wenn der Benutzer zu einer bestimmten URL navigiert und Informationen zu einer bestimmten Aufgabe anzeigt.

Erstellen einer neuen Komponente

Um Aufgabendetails anzuzeigen, erstellen wir eine eigenständige Komponente. Sie ist unabhängig und kann direkt in der Routing-Konfiguration eingebunden werden.

Führen Sie diesen Befehl aus:

Dadurch wird die Datei task-details.component.ts zusammen mit ihrem Template, den Styles und den Tests erstellt. Sie können die Testdatei bei Bedarf problemlos löschen.

Implementierung der Komponente

In diesem Schritt benötigen wir nur die ID, den Titel und den Status der Aufgabe — das sind alle Informationen, die wir über eine Aufgabe haben. Daher fügen wir in der Komponente lediglich eine task-Eigenschaft hinzu.

Erstellen wir nun das Template und die zugehörigen CSS-Styles:

Das Template verwendet die Direktive *ngIf, um die Aufgaben-Detailkarte anzuzeigen, falls die Aufgabe existiert; andernfalls wird mithilfe von ng-template die Meldung "Task not found" angezeigt.

Innerhalb der Karte werden die ID, der Titel und der Status der Aufgabe angezeigt sowie ein Button, um zur Hauptaufgabenliste zurückzukehren (die Funktionalität des Buttons fügen wir später hinzu).

Unser TaskDetailsComponent ist nun einsatzbereit. Im nächsten Kapitel binden wir ihn in unser Routing ein.