*ngIf ohne zusätzliches wrapper-Element

Gerade bei komplexen Templates kommt es häufiger vor, dass man dort gewisse Logik einbauen und einige Elemente in der Abhängigkeit von bestimmten Werten anzeigen möchte. In JavaScript würde man im solchen Fall direkt auf die jedem bekannte if Anweisung zugreifen. Auch Angulars Template-Engine bietet eine if Anweisung, nämlich als eine strukturelle Direktive *ngIf, an.

Eine beispielsweise Verwendung von *ngIf würde wie folgt aussehen:

Mit diesem Ansatz gibt es aber ein gewisses Problem. Eine strukturelle Direktive, somit auch *ngIf, kann nur auf einem HTML-Element angewandt werden. Dadurch können wir unter Umständen gezwungen werden, zusätzliche wrapper-Elemente einzubauen, nur damit sie die Logik halten können. Dadurch schreiben wir unnötigen Code, der zusätzlich negativen Einfluss auf die Wartbarkeit und Performance hat.


There must be a better way! Diesen Spruch hat Raymond Hettinger — ein weltweit geschätzter Python Core Programmier und Keynote Speaker — sehr gerne in seinen Workhops gebracht. In der Tat gilt es sehr oft in der Software-Entwicklung. Auch in diesem Fall.

Behilflich wird für uns die Direktive ng-container sein!

Ng-container wendet lediglich die jeweiligen strukturellen Direktiven an und rendert keinen zusätzlichen HTML-Code.

Mit dem einfachen Trick lässt sich viel unnötigen Code in unseren gerenderten Templates sparen.