💡Hinweise und Zusatzaufgaben zu Kapitel 2

Directives

@for

@for ermöglicht dir durch Listen, Arrays, Sets, ... zu iterieren und auf die einzelnen Elemente darin zugreifen zu können. Dazu brauchst du zu Beginn eine Liste über welche du iterieren kannst. Dafür erstellt du Mock-Daten als Array:

Im Kapitel 2 wird dir bereits die gesamte Liste HEROES angeboten, du kannst gerne diese verwenden.

export const HEROES: Hero[] = [
  { id: 12, name: 'Dr. Nice', power: 'Healing' },
  { id: 13, name: 'Bombasto', power: 'Explosions' },
  ...
];

Durch diese Liste können wir mit dem @for iterieren:

<h2>My Heroes</h2>
<ul class="heroes">
  @for(hero of HEROES; track hero.id) {
    <li>
      <button type="button">
        <span class="badge">{{hero.id}}</span>
        <span class="name">{{hero.name}}</span>
      </button>
    </li>
  }
</ul>

Mit der lokalen Deklaration (hero) erstellst du zur Laufzeit für jeden Eintrag in der Liste ein Hero-Objekt. Anschliessend hast du dann in jedem Listen Eintrag Zugriff auf das dazugehörige Hero Objekt.

Event

In diesem Tutorial lernst du den (click) Event kennen. Dieses Event handelt den Fall ab, wenn du auf ein Element klickst (selbstredend nicht?). In angular gibt es unzählige Events welche du abhandeln kannst, du wirst im Verlaufe des Projekt noch mit einigen in Kontakt kommen.

Solche Events kannst du an Methoden binden, das sehen wir uns im folgenden Beispiel an:

<button type="button" (click)="onSelect(hero)">

selectedHero?: Hero;
onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

Beim Klick auf den button wird die Funktion onSelect ausgeführt.

Im nächsten Schritt verwenden wir @if und zeigen die Details an, sofern ein selectedHero vorhanden ist.

@if(selectedHero) {
    ...
}

💡 Übung

Cool du kannst nun Helden auflisten und auf Klick die Details anzeigen. Jedoch kann es sein, dass die Superkräfte eines Helden noch nicht definiert wurde bzw. null oder undefined ist.

Falls eine Superkraft definiert ist, soll in der Auflistung nebst dem Namen ein 💥-Emoji angezeigt werden.

1. Markiere die "Superkraft" Property als Optional

2. Überprüfe in der Auflistung ob die Superkraft erfasst wurde und falls ja, zeige das emoji an.

💥