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

Best Practices
1

Hello,
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

2

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

3

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.

https://ilikekillnerds.com/2016/05/string-enums-typescript/

4

@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

5

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
<template>
  <nav class="${currentMenu === Menus.mainMenu ? 'js-is-current-menu' : ''}"></nav>
</template>
1 Like
6

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

2 Likes
7

@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,
    Pending,
    Open,
    Closed
}

** 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}
</label>
1 Like
8

@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
9

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}
</label>
1 Like
10

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:

@viewEngineHooks()

export class SessionStatusBinder {

  beforeBind(view) {

    view.overrideContext.SessionStatus= SessionStatus;

  }

}