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

Wenn wir eine Direktive wie ngFor nutzen, so binden wir diese an ein Element im Template. Mit ngFor wird das Element dann so oft vervielfältigt, wie Items in dem Array existieren – auch wenn wir eigentlich kein DOM-Element für diese Inhalte benötigen. Auch mit ngIf haben wir diese Situation: Wir wollen eigentlich nur Teile des Templates zu einem logischen Block zusammenfassen und müssen dafür unnötige DOM-Elemente einfügen.

Um diese Unschönheit zu lösen, stellt Angular ein passendes Hilfsmittel bereit: den <ng-container>. Dieses Element erzeugt kein DOM-Element, sondern wird direkt durch seinen Inhalt ersetzt. Der Container wird hauptsächlich verwendet, um darauf eine Direktive wie ngFor oder ngIf anzuwenden.

<span *ngFor="let item of ['a', 'b', 'c']">

{{ item }},

</span>

<!-- Resultat: -->

<!-- <span>a,</span><span>b,</span><span>c,</span> -->

<ng-container *ngFor="let item of ['a', 'b', 'c']">

{{ item }},

</ng-container>

<!-- Resultat: -->

<!-- a, b, c, -->

Die Implementierung ist damit vollständig: Wir können nun zwischen den beiden Komponenten unserer Anwendung hin- und herwechseln. Klicken wir ein Buch in der Listenansicht an, werden wir zur Detailansicht geleitet. Von dort aus gelangen wir mit einem Klick auf den Button wieder zurück zur Buchliste.