Читать книгу Angular - Ferdinand Malcher - Страница 196

Es ergibt sich die folgende Dateistruktur:

Um den Inhalt der Item-Komponente kümmern wir uns später und schauen uns zunächst die BookListComponent an.

BookListItem in die BookList einbauen

Hier verwenden wir nun die BookListItemComponent für die Darstellung der Listenelemente. Der bisherige Teil im Template soll durch die neue Komponente ersetzt werden. Wir setzen also statt des Link-Elements ein neues Element mit dem Namen <bm-book-list-item> ein. Dieser Elementname passt zum automatisch festgelegten Selektor der zuvor generierten Komponente. Da es sich weiterhin um ein Listenelement handelt, das über die CSS-Klasse item sein Aussehen erhält, muss die Klasse nun auf dieses neue Element angewendet werden.

Um der Item-Komponente mitzuteilen, welches Buch angezeigt werden soll, kommen Property Bindings zum Einsatz. Mit dem Ausdruck [book] übergeben wir dazu das jeweilige Buch-Objekt. Mit ngFor durchlaufen wir alle Bücher und erzeugen dadurch für jedes Buch ein neues Listenelement. Das anzuzeigende Buch liegt durch die Schleife dann jeweils in der Variable b vor. Dieses Objekt schreiben wir in das Property book der Kindkomponente. Damit fließen die Buchdaten in die Item-Komponente hinein und wir können sie innerhalb der Komponente wieder auslesen.

<div class="ui middle aligned selection divided list">

<bm-book-list-item class="item"

*ngFor="let b of books"

[book]="b"></bm-book-list-item>

</div>