*ngIf ohne zusätzliches wrapper-Element

Łukasz Gawryś
Oct 23, 2017 · 1 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store