Selective Angular Component Rendering with ngSwitch

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:

export enum StoryEntryType {

    PlayerCommand,

    StoryNarrative,

    CommandError,

    SystemText

}

StoryEntryType.ts

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

import {StoryEntryType} from './StoryEntryType';

export class StoryEntry {

  EntryType: StoryEntryType;

  Text: string;

  

  constructor(EntryType: StoryEntryType, Text: string) {

    this.EntryType = EntryType;

    this.Text = Text;

  }

}

StoryEntry.ts

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

@Input()
	public Entries: StoryEntry[] = [];

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:

<div [ngSwitch]="Entry.EntryType">
	<app-story-text *ngSwitchCase="Entries.StoryNarrative" [Text]="Entry.Text"></app-story-text>
	<app-player-command *ngSwitchCase="Entries.PlayerCommand" [Text]="Entry.Text"></app-player-command>
	<p *ngSwitchCase="Entries.SystemText" class="text-system">{{Entry.Text}}</p>
	<p class="text-warn" *ngSwitchDefault>{{Entry.Text}}</p>
	</div>

view rawngSwitch.html

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:

import {Component, Input, OnInit} from '@angular/core';
	import {StoryEntry} from '../../Model/StoryEntry';
	import {StoryEntryType} from '../../Model/StoryEntryType';
	@Component({
	selector: 'app-story-entry',
	templateUrl: './story-entry.component.html',
	styleUrls: ['./story-entry.component.scss']
	})
	export class StoryEntryComponent implements OnInit {
	@Input()
	public Entry: StoryEntry;
	// Alias the enum so we can refer to its values in the component
	public Entries = StoryEntryType;
	constructor() { }
	ngOnInit() {
	}
	}

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.