💡Hinweise und Zusatzaufgaben zu Kapitel 5

Übungen

Input und Output

Du hast im Kapitel 3 kennengelernt, wie man Daten in eine Child-Komponente hineingibt. Natürlich kannst du auch vom Child Events an den Parent zurückgeben. dazu verwendet man Event Emitter.

Lies bitte dazu den folgenden Artikel durch: output()

Wir wollen nun die Heroes, die in der Heldenauflistung angezeigt werden, als eigene Komponente auslagern. Erstelle dafür eine Komponente, welche die Daten eines Helden als Input entgegennimmt und beim Klick einen Event an den Parent schickt mit der Id des Helden. Diese wird dann für die Navigation verwendet. Im @for soll nun deine Komponente angezeigt werden.

Async Pipe anwenden

Im 4. Kapitel hast du gelernt wie man Observable nutzt und was das genau ist. Wir hatten dafür eine Liste von Helden die als Observable<Hero[]> zurückgeliefert wurde. Da du jetzt eine Seite erstellt hast mit den Lessons learned, wird es Zeit deine Kontaktangaben darunter zu legen. Diese sollen mittels asynchronem Aufruf geladen werden. Folgendermassen muss das aussehen:

contactData$: Observable<Contact> = of({
    company: "[DEINE FIRMA]",
    name: "[DEIN NAME]",
    email: "[DEINE EMAIL ADRESSE]",
})

Es handelt sich hierbei nicht um eine Liste sondern ein einzelnes Objekt, so kannst du @for nicht mehr nutzen. @if ist eine sehr gute Option, recherchiere mal wie dies gemacht wird.