Selective Angular Component Rendering with ngSwitch

Matt Eland
Feb 6 · 3 min read

Sometimes in Angular you have a collection of items and need to display a different component for different items in the same collection. Thankfully, Angular offers a directive called ngSwitch that gives us flexibility in how components render themselves. In this short article I'll show you an example from my game development project and how I used ngSwitch to work around it.

The Problem

In my particular case I’m building a text-based adventure game in Angular. I have a central region where story text will go, but not all text is equal. Some pieces of text will represent commands the player types in, some will represent story narrative, and some items representing general system status information.

I want these different types of text to be formatted differently, as pictured below:

The problem is that when you use ngFor to loop over a collection in Angular, the element the ngFor directive is on is the one that will be repeated. This makes it harder to represent content dynamically based on the values in the row.

To be more specific, I have an enum representing the different types of story text that are available:

The StoryEntry class represents the individual lines in the interactive story and looks like this:

This class is stored in a component as a collection like so:

So, now the problem comes in of how we do a ngFor over this collection in such a way that different EntryType values get rendered with different components.

The Solution: ngSwitch

The simplest and most maintainable solution I’ve found for this problem is to introduce a new component that takes in the StoryEntry object, then its template uses to conditionally render an additional component based on the EntryType of the entry.

ngSwitch lets you evaluate some condition inline in your HTML and render the element with a directive matching the switch condition via a ngSwitchCase directive. If no condition is matched, the default entry will be included instead if one is defined via the ngSwitchDefault directive.

This looks like this:

What’s especially noteworthy here is the value in the ngSwitchCase directive. We need to be able to reference an enum member by name in our HTML for maintainability. It turns out that in order to do that cleanly in Angular you need to do a little bit of a hack by defining an alias for your enum inside of the component like the following:

This added complexity / hack from line 16 is unfortunate, but the best way I know of solving this problem. You could go away from enums entirely and use string values and string comparison, which removes this hack. However, if you did that, you lose the enum member safety that this solution provides.

End Result

This use of components, ngSwitch and using the enum alias gives us a fairly simple approach to conditionally displaying components for some types of entries versus others, which is what we set out to do.

Stay tuned as I continue to build out this adventure game over the coming month.


Originally published at https://killalldefects.com on February 6, 2020.

Matt Eland

Written by

Matt is a front-line .NET and JavaScript software engineering manager. Matt writes frequently on software quality at https://www.KillAllDefects.com

JavaScript in Plain English

Learn the web's most important programming language.

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