Angular – enums and switch case in templates

Category: Front-end 2020-05-29 Łukasz Nojek

Although TypeScript has support for enums, Angular’s templates can access only fields …. by the related component. I will present two ways of accessing enums in templates.

Table of contents

Assumptions
Way 1 – ngIf
Way 2 – ngSwitch

Assumptions

We store enum in a model, outside of the component:

export enum State {
    Started,
    Completed
}

export class Item {
    name: string;
    state: State;
}

We also have a component that inputs the Item:

import { Component, Input } from '@angular/core';
import { Item } from './model';

@Component({
	selector: 'item',
	template: 'State: {{ item.state }}'
})
export class ItemComponent {
	@Input() item: Item;
}

Way 1 – ngIf

Both solutions require import of the enum type State and allowing template access it by creating a field equal to the enum – lines 2 and 14 below:

import { Component, Input } from '@angular/core';
import { Item, State } from './model';

@Component({
	selector: 'item',
	template: `
		<app-component1 *ngIf="item?.state === State.Started"></app-component1>
		<app-component2 *ngIf="item?.state === State.Completed"></app-component2>
	`
})
export class ItemComponent {
	@Input() item: Item;
	
	State = State;
}

Although it may seem strange and confusing (State = State), it’s required to allow the template access an enum type. In the template, we check the value of state as we would do in the component code.

I added optional chaining for cases when item will be undefined.

Way 2 – ngSwitch

Another solution utilizes ngSwitch in case multiple variants have to be covered, and only one of them should be executed:

import { Component, Input } from '@angular/core';
import { Item, State } from './model';

@Component({
	selector: 'item',
	template: `
		<ng-container [ngSwitch]="item?.state">
			<app-component1 *ngSwitchCase="State.Started"></app-component1>
			<app-component2 *ngSwitchCase="State.Completed"></app-component2>
		</ng-container>
	`
})
export class ItemComponent {
	@Input() item: Item;
	
	State = State;
}

It works similarly as the switch keyword in JavaScript. All switch cases are exclusive and only the first one matching the condition will be executed.

Łukasz Nojek – blog

Software development and architecture

Angular – enums and switch case in templates

Category: Front-end 2020-05-29 Łukasz Nojek

Assumptions

Way 1 – ngIf

Way 2 – ngSwitch

Read next