how to use custom enum properties in angular 2

Question

I am new to angular 2, although using it to build an app. I come from a CSharp background, therefore assume that one can create an enum type property. So as to apply a specific enum value based on its location.

However i have found no examples online explaining how to achieve such technique. Is it possible, if so can you provide a demo?

export enum DisplayType {
  Small,
  Large
}

<e-view displayType="DisplayType.Small"></e-view>

If not possible, are there other techniques that can achieve the same result.

Lionel · Accepted Answer · 2017-04-22 18:45:50Z

1

In the component using the enum, add a property:

readonly DisplayType: typeof DisplayType = DisplayType;

Then call the enum in HTML:

<e-view [displayType]="DisplayType.Small"></e-view>

answered Apr 22, 2017 at 18:45

Lionel

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aravind · Accepted Answer · 2017-04-22 00:45:19Z

0

You cannot handle the variable names like this in HTML, instead you should be using a method to get the enum value

<e-view [displayType]="getType()"></e-view>
getType(){
  return DisplayType.Small
}

Note: In your question displayType did not have [ ]

answered Apr 22, 2017 at 0:45

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

6 Comments

vicgoyso Over a year ago

so enums cant be used for such purpose, ok... However i would like to specify the display type in the view component like so: <e-view [displayType]="small"></e-view>. If displayType is of type string, how could i apply it in the html template?

Aravind Over a year ago

how will you define a enum to have string

vicgoyso Over a year ago

no, im now considering just using a string now instead, since one cannot use enums. I would like to know how i could pass the value "small" to my html template?

Aravind Over a year ago

how you will define the string value to an enum? are you sure that you can assign?

vicgoyso Over a year ago

I have found a solution, by setting the enum to string, this is good enough for me, hence: strDisplayType:string; @Input() public set displayType (value: DisplayType) { this.strDisplayType = DisplayType[value] }. I can now make use of the this.strDisplayType string in my html template like so: *ngIf="displayType == 'Small'" ... thanks anyway

|

Mike3355 · Accepted Answer · 2017-04-22 01:07:13Z

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

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"];

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);

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;
    // ...
}

example:

import { Component } from '@angular/core';

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

example

@Component({
  selector: 'my-app',
  template: `
  <h1>Choose Value</h1>

  <select (change)="parseValue($event.target.value)">
    <option>--select--</option>
    <option *ngFor="let name of options"
        [value]="name">{{name}}</option>
  </select>

  <h1 [hidden]="myValue == null">
    You entered {{AgentStatus[myValue]}}
    <br>
    You are {{isOffline ? "offline" : "not offline"}}.
  </h1>`
})
export class AppComponent { 


  options : string[];
  myValue: AgentStatus;
  AgentStatus : typeof AgentStatus = AgentStatus;
  isOffline : bool;

  ngOnInit() {
    var x = AgentStatus;
    var options = Object.keys(AgentStatus);
    this.options = options.slice(options.length / 2);
  }

  parseValue(value : string) {
    this.myValue = AgentStatus[value];
    this.isOffline = this.myValue == AgentStatus.offline;
  }
}

Tiep Phan · Accepted Answer · 2017-04-22 01:07:48Z

0

in your component, add one more getter

get DisplayType() {
  return DisplayType;
}

and you can use in your template

[displayType]="DisplayType.Small"

answered Apr 22, 2017 at 1:07

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Collectives™ on Stack Overflow

how to use custom enum properties in angular 2

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related