Have access to the values of an enum in a html page

In a .ts file, I have a method that returns an array of enumerations to me.
I would like to have access to the values of a my table in an input in my HTML page. Can you help me please

Can you be more specific?
About your input for example?
Let’s say your enumeration is countries or colors…
You want to show them in a select box? Here is the topic on that: http://aurelia.io/docs/binding/selects#introduction
Or you want them to be lookup values in autocomplete?
Or do you want an array of checkboxes? A topic for checkboxes: http://aurelia.io/docs/binding/checkboxes

As @Alexander-Taran said you should explain in more detail but maybe you work with enum type in typescript if yes you should read the following article.


@Pirlo972 in your view model assign enum type to a field. This will allow you to use this field in HTML so it looks like you’re using types. There is also this article http://www.foursails.co/blog/template-constants/ if you want a more generic solution

I ran into a similar issue and found this question. I would like to declare an enum and also use that enum inside my view like so, but this doesn’t work:

// menu.ts
enum Menus {
  mainMenu = 'mainMenu',
  subMenu = 'subMenu',
export class Menu{
  currentMenu = Menus.mainMenu;
  goto(subMenu: Menus){ this.currentMenu = subMenu; }

// menu.html
  <nav class="${currentMenu === Menus.mainMenu ? 'js-is-current-menu' : ''}"></nav>
1 Like

Use export enum - ts will preserve it then and won’t replace with inline constants. Also in your VM - Menus = Menus;


@Pirlo972 never really responded with an example of what he was after. However, I have a specific example of where I’d like to access an enum in my view.

I want to repeat.for over my enum type to create a list of radio buttons. I need access to both the numeric value as well as the text representation of that enum. Is this possible?

enum SessionStatus {
    None = 0,

** Note: I realize the following code sample doesn’t work. I’m trying to figure out how I would accomplish something like this though. IOW, notice that I need both the numeric portion of the enum (what I’m referring to as e.value and the text portion e.text)

<label repeat.for="e of SessionStatus">
    <input type="radio" name="filters" value.bind="e.value" />${e.text}
1 Like

@roddharris can use reverse enum mapping (see docs and example).

in your view model, you list the enum values using a utility function like described in this issue.

1 Like

could even write an aurelia value converter, not tested but something like the below should work:

export class NumericEnumValueConverter {
  toView(enum) {
    return Object.keys(enum)
      .filter(key => !isNaN(Number(key))
      .map(key => ({value: key, text: enum[key]}));
<require from="./numeric-enum-value-converter"></require>
<label repeat.for="e of SessionStatus | numericEnum">
    <input type="radio" name="filters" value.bind="e.value">${e.text}
1 Like

Second time that I stumbled on this thread, and second time it didn’t work out-of-the-box. The reason: We need a view hook for the enum for it to work:


export class SessionStatusBinder {

  beforeBind(view) {

    view.overrideContext.SessionStatus= SessionStatus;