Link opens in new tab

Thanks for your support -- It does make a difference

Let’s assume you have the following enum in TypeScript:

export enum AgentStatus { available =1 , busy = 2, away = 3, offline = 0 }

An enum is just an object. Your enum is written something like this in JavaScript:

{ 0: "offline", 1: "available", 2: "busy", 3: "away", available: 1, busy: 2, away: 3, offline: 0 }

The benefit from typing is very limited in enums. Let me explain…

A very common thing you might want to do, is convert a string to an enum. This line is valid:

var value = <AgentStatus>"offline";

But it’s not useful, because

value == AgentStatus.offline // <- false, because it's "offline" == 0

So, you should always store your values as numbers, which you can obtain as follows:

How do you convert a string to an enum in TypeScript?

var value = AgentStatus["offline"]; // so value is now 0 // You can also use this, which only gives IDE hints, no runtime benefit var value: AgentStatus = AgentStatus["offline"];

This makes the previous comparison work:

value == AgentStatus.offline // <- true, because it's 0 == 0

Now, a couple questions remain:

How to convert a TypeScript enum value to a string?

AgentStatus.offline // 0 AgentStatus[AgentStatus.offline] // -> AgentStatus[0] -> "offline"

How to get all the values of a TypeScript enum type?

var options : string[] = Object.keys(AgentStatus); // The options list has the numeric keys, followed by the string keys // So, the first half is numeric, the 2nd half is strings options = options.slice(options.length / 2);

Gotcha: Undefined enum type in Angular 2 views

If you write this in your Angular2 template:

{{AgentStatus[myValue]}}

It will fail, because it doesn’t have access to imported types (it gets executed later by AngularJS).

To make it work, your component will need to have a reference to the enum type / object, something like:

export class MyComponent { // allows you to use AgentStatus in template AgentStatus = AgentStatus; myValue : AgentStatus; // ... }

Runnable Demo With All Solutions

Here is an example that explains everything I pointed in here:

(Click the ▶ button at the top right to see it in action)

This post was inspired by this StackOverflow answer.

Share With Friends:

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.

Take it for a test ride, and you may unsubscribe any time.

You might also want to support me by checking these out [Thanks]:

Links open in new tabs

Thanks for your support -- It does make a difference