Full Gamut Edition

Charlie Greenman
Sep 6 · 2 min read

In In Angular there are two quirks with regards to structural directives:

Quirk #1 — Requiring Extra Element to Implement Structural Directive
Quirk #2 — Inability to apply more than two structural directives on the same element

The quirk probably naturally arises, because for loops, and if statements weren’t meant to be used within a template. So if we think about it that way, wherein we can use some sort of Angular functionality, to bring it out of the DOM, it brings us to ng-container.

Beautiful photo for you to enjoy. A bit random, I know, but thought you would enjoy.

Understanding ng-container

In the Angular documentation, ng ng-container is specified as a way to group elements without introducing a new html element. Some of the examples mentioned include a <span> element that might introduce some accidental styling, or attempting to put a <span> inside of a select element. ng-container will allow for to side step those issues, by not introducing a new element to the actual DOM. We can use the ng-container to solve the quirks we mentioned earlier:

Solution to Quirk #1 — Requiring Extra Element to Implement Structural Directive

Here, by introducing an ng-container, we no longer have to introduce a new div, if we want the content to show conditionally. Likewise, to solve the issue we had before of being able to use two structural directives, we can do the following:

Solution to Quirk #2 — Inability to apply more than two structural directives on the same element

We could technically apply the *ngIf on the li element itself, for consistency sake. If I had a team member that preferred otherwise, I would be more than happy with that, just my preference.

Thank you to Austin Spivey for being the person where I saw this approach from.

Razroo

UI Architecture

Charlie Greenman

Written by

Virtuous ruckus running amok, digitally.

Razroo

Razroo

UI Architecture

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