> For the complete documentation index, see [llms.txt](https://m335.ict-bz.ch/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://m335.ict-bz.ch/tag-1/tour-of-heroes/2.-display-a-list/hinweise-und-zusatzaufgaben-zu-kapitel-2.md).

# 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.

```typescript
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:

```html
<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:

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

```typescript
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.

<pre class="language-html"><code class="lang-html"><strong>@if(selectedHero) {
</strong><strong>    ...
</strong><strong>}
</strong></code></pre>

## 💡 Übung

<figure><img src="https://1951332971-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfaRLpqjavHkOOr8FPTA1%2Fuploads%2F8FKhd4Max4ZOfVe0BmFz%2Fimage.png?alt=media&amp;token=18cfb8e5-7ae0-4087-8dbe-2711f1c38791" alt="" width="180"><figcaption></figcaption></figure>

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.&#x20;

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.

```
💥
```