Using TypeScript string enums with template attributes

Help Requests
1

When I run the below, Colors.RED seemingly resolves to something falsy because the color attribute of the div doesn’t even appear in the rendered HTML (though if I switch it to the string literal color="red", it renders just fine). How can I fix this?

However, there seems to be no problem with Colors.BLUE resolving to the string blue and it populates the text area of the div with no problems (so long as you have the line Colors = Colors;).

I don’t understand why the string interpolation w/ string enum works in the body of the div, but not in the attribute assignment.

app.ts

export class App {
  Colors = Colors;
  constructor() {}
}

export enum Colors {
  RED = 'red',
  BLUE = 'blue'
}

app.html

<template>
  <div color="${Colors.RED}">
    ${Colors.BLUE}
  </div>
</template>
1 Like
2

TypeScript has an option for the compiler name “preserve const enum”, it should help you in this case.

1 Like
3

Thanks, I gave that a try but it doesn’t seem to help.

1 Like
4

I am using this, with no issues in TS, in a globals.ts file:

export const STUDENT_LEVEL_CONSTANTS =
{
    PPL: 1,
    IFR: 2,
    COM: 3,
    CFI: 4
};
1 Like
5

Thanks @airboss001 , but that’s not an enum, that’s just an object with numeric values.

1 Like