DEV Community

Cover image for Selective Angular Component Rendering with ngSwitch
Matt Eland
Matt Eland Subscriber

Posted on • Originally published at killalldefects.com on

7 1

Selective Angular Component Rendering with ngSwitch

The post Selective Angular Component Rendering with ngSwitch appeared first on Kill All Defects.


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:

Image

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
}

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;
}
}
view raw StoryEntry.ts hosted with ❤ by GitHub

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 ngSwitch 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 raw ngSwitch.html hosted with ❤ by GitHub

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() {
}
}
view raw ngSwitch.ts hosted with ❤ by GitHub

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.

Image

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
monfernape profile image
Usman Khalil

Never heard of switch. Good entry Matt

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay