Angular. Ferdinand Malcher
das wir mit der Direktive ngIf einblenden oder ausblenden, je nachdem, ob der letzte Name erreicht wurde oder nicht. Solange der letzte Wert nicht erreicht wurde, wird also hinter jedem Autor ein Komma und ein Leerzeichen angefügt.
Thumbnails anzeigen
Außerdem wird das erste Bild aus der Liste der Thumbnails eingebunden. Dazu können wir direkt auf das Property src des Image-Elements zugreifen. Die Prüfung ist nötig, um das Element nur anzuzeigen, wenn auch wirklich ein Bild zum Buch hinterlegt ist.
<div class="ui middle aligned selection divided list">
<a *ngFor="let book of books" class="item">
<img class="ui tiny image"
*ngIf="book.thumbnails && book.thumbnails[0] && book. thumbnails[0].url"
[src]="book.thumbnails[0].url">
<div class="content">
<div class="header">{{ book.title }}</div>
<div *ngIf="book.subtitle" class="description">{{ book. subtitle }}</div>
<div class="metadata">
<span *ngFor="let author of book.authors; last as l">
{{ author }}<span *ngIf="!l">, </span>
</span>
<br>
ISBN {{ book.isbn }}
</div>
</div>
</a>
</div>
Listing 6–15 Das Template der BookListComponent (book-list.component.html)
Beispieldaten
Damit wir auch sofort ein paar Bücher in der Liste sehen können, initialisieren wir in der Komponente ein Array mit Beispielbüchern (Listing 6–16). Dadurch dass wir das Property book mit dem Interface Book typisiert haben, sehen wir direkt im Editor, welche Eigenschaften wir zuweisen müssen und welche optional sind. Sofern wir vergessen, eine der obligatorischen Eigenschaften zuzuweisen, wird der Compiler eine entsprechende Fehlermeldung anzeigen.
Wir wollen in diesem Fall alle Eigenschaften angeben (auch die optionalen), denn im Template der Listenansicht werden ja auch alle diese Werte verwendet. Das Interface Thumbnail müssen wir nicht separat importieren, denn die Eigenschaft thumbnails im Interface Book verweist bereits darauf. Somit zeigt uns der Editor auch direkt an, dass wir hier ein Array angeben können, das Objekte mit der Eigenschaft url und der optionalen Eigenschaft title erwartet.
import { Component, OnInit } from '@angular/core';
import { Book } from '../shared/book';
@Component({
selector: 'bm-book-list',
templateUrl: './book-list.component.html',
styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
books: Book[];
ngOnInit(): void {
this.books = [
{
isbn: '9783864907791',
title: 'Angular',
authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
published: new Date(2020, 8, 1),
subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices',
rating: 5,
thumbnails: [{
url: 'https://ng-buch.de/angular-cover.jpg',
title: 'Buchcover'
}],
description: 'Lernen Sie Angular mit diesem Praxisbuch!'
},
{
isbn: '9783864905520',
title: 'React',
authors: ['Oliver Zeigermann', 'Nils Hartmann'],
published: new Date(2019, 11, 12),
subtitle: 'Grundlagen, fortgeschrittene Techniken und Praxistipps',
rating: 3,
thumbnails: [{
url: 'https://ng-buch.de/react-cover.jpg',
title: 'Buchcover'
}],
description: 'Das bewährte und umfassende Praxisbuch zu React.'
}
];
}
}
Listing 6–16 BookListComponent (book-list.component.ts)
ngOnInit() für Initialisierung verwenden
Der Code für die Initialisierung der Daten soll ausgeführt werden, wenn die Komponente geladen wird. Man könnte dafür den Konstruktor der Klasse verwenden. In Angular kommt allerdings die Methode ngOnInit() zum Einsatz, wie im Listing 6–16 zu sehen ist. Diese Methode wird automatisch aufgerufen, wenn die Komponente vollständig initialisiert ist. Sie ist einer der sogenannten Lifecycle-Hooks von Angular. Details dazu finden Sie im Kasten auf Seite 99. Damit ist unsere Listenkomponente komplett!
ngOnInit() statt Konstruktor – die Lifecycle-Hooks von Angular
Eine Angular-Komponente hat einen definierten Lebenszyklus. Sie wird zunächst initialisiert und es werden ihre Bestandteile gerendert. Wird die Komponente nicht mehr benötigt, wird sie abgebaut und die Ressourcen werden freigegeben.
Mit den Lifecycle-Hooks von Angular können wir gezielt in diesen Lebenszyklus einer Komponente eingreifen. Wechselt die Komponente in einen bestimmten Zustand, können wir Aktionen an dieser Stelle im Ablauf ausführen. Im Beispiel haben wir die Methode ngOnInit() eingesetzt. Sie wird automatisch ausgeführt, wenn die Komponente geladen wurde. Damit die Methode korrekt definiert wird, sollte die Komponentenklasse immer das Interface OnInit implementieren.
Es existieren noch weitere Lifecycle-Hooks, auf die wir an dieser Stelle aber gar nicht näher eingehen wollen. Stattdessen widmen wir uns dem Lebenszyklus von Komponenten ab Seite 766 ausführlicher.
Merke: Statt dem Konstruktor der Klasse sollten wir zur Initialisierung immer die Methode ngOnInit() einsetzen.
Listenkomponente in die Anwendung einbinden
app.component.html leeren
Damit wir die neue Komponente sehen, muss sie in den Bereich eingebunden werden, der aktuell sichtbar ist: die Hauptkomponente AppComponent. Hier ist momentan noch das Beispiel-Template vorhanden, das von der Angular CLI generiert wurde. Wir können dieses Template getrost entfernen, denn wir wollen ja unsere eigene Anwendung entwickeln. Wir löschen also den gesamten HTML-Code