88

I get from a RESTful Service the following data:

[
  {
    "id": 42,
    "type": 0,
    "name": "Piety was here",
    "description": "Bacon is tasty, tofu not, ain't nobody like me, cause i'm hot...",
  }...

And I'm mapping with this class:

export enum Type {
  Info,
  Warning,
  Error,
  Fatal,
}


export class Message{
  public id: number;
  public type: Type:
  public name: string;
  public description: string;
}

But when I access 'type' in Angular2 I get only a int value. But I'd like to get a string value.

e.g:

'message.type=0'
{{message.type}} => should be Info
'message.type=1'
{{message.type}} => should be Warning
James Monger
  • 10,181
  • 7
  • 62
  • 98
Franz Peter Tebartz van Elst
  • 1,609
  • 3
  • 10
  • 26

4 Answers4

124

Enums in TypeScript are numbers at runtime, so message.type will be 0, 1, 2 or 3.

To get the string value, you need to pass that number into the enum as an index:

Type[0] // "Info"

So, in your example, you'll need to do this:

Type[message.type] // "Info" when message.type is 0

Docs

Dmitry Grinko
  • 13,806
  • 14
  • 62
  • 86
James Monger
  • 10,181
  • 7
  • 62
  • 98
  • How can I do that? I'm mapping like this right now: `(response => response.json() as Message[]` – Franz Peter Tebartz van Elst Feb 17 '17 at 13:49
  • 2
    Import `Type` into your file, and rather than doing `message.type` to get the value, do `Type[message.type]`. You do this where you want the string value – James Monger Feb 17 '17 at 13:50
  • 7
    Unfortunately, `Type` will not be available inside a template, unless you add it as a property to the component class as `public Type = Type;`. –  Feb 17 '17 at 13:52
  • 1
    Can anyone tell me why if i do Type[message.type] in my case, in debugger I see an error because Type is undefined (it's imported properly to this .ts file)? – Vodenjak Nov 10 '17 at 11:56
61

Enums in TypeScript are objects at runtime that have properties that go from int -> string and from string -> int for all possible values.

To access the string value you will need to call:

Type[0] // "Info"

Make sure that you are passing the correct type into the property accessor though because chained calls can result in the following:

Type[Type.Info] // "Info"
Type[Type[Type.Info]] // 0
Type["Info"] // 0
Type[0] // "Info"
Teddy Sterne
  • 13,774
  • 2
  • 46
  • 51
  • How to check if a number is part of the enum, f.x. check for number 3000 before returning Type[3000]? – gajo357 Jul 03 '20 at 07:20
  • 1
    @gajo357 You can use the `in` operator to test if 3000, or any value/key exists in the enum. Example `const has3000 = 3000 in Type` – Teddy Sterne Jul 06 '20 at 17:19
3

This is how enum works in the typescript:

   enum PrintMedia {
      Newspaper = 1,
      Newsletter,
      Magazine,
      Book
    }

  PrintMedia.Magazine;            // returns  3
  PrintMedia["Magazine"];         // returns  3
  PrintMedia[3];                  // returns  Magazine
  PrintMedia[PrintMedia.Magazine];// returns  Magazine
Vlad Hrona
  • 387
  • 3
  • 7
2

I think with 

{{message.type}}

you just get the mapped value and not the enum. Please try following code.

{{TYPE[message.type]}}
C.Stebner
  • 39
  • 2