Accessing const enums in Angular html template

Question

Assume I have a const enum:

export const enum MyConstEnum{
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

Now I want to use it in my Angular template:

<span *ngIf="name === MyConstEnum.Value1">This has some value</value>

However, this is not possible, because MyConstEnum is not seen by template. So the question is how to access const enum in Angular html template?

If enum won't be const like this

export enum MyEnum{
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

there is a solution to create property in templates' component

  public get MyEnumInComponent() {
    return MyEnum;
  }

and MyEnumInComponent will be accessible in HTML. However, I have const enum.

For this I cannot defined property like above. What is the solution (except changing const enum to enum)?

Can you elaborate on the problem here? I don't get what is not working and what you actually want to accomplish. — Philipp Meissner
– Philipp Meissner, Commented Aug 10, 2020 at 8:42
I can see here on this link 'github.com/angular/angular/issues/25963' that it is an issue and it needs a fix. Also some have suggested a work around see if t helps. — Apurva Pathak
– Apurva Pathak, Commented Aug 10, 2020 at 8:48
@TarangRathod can you show an example, please? It is "const enum" not "enum"? — renathy
– renathy, Commented Aug 10, 2020 at 8:54

yurzui · Accepted Answer · 2020-08-10 09:31:08Z

3

It will be possible if TypeScript won't erase const enum declaration in the emitted JavaScript code.

There is dedicated compiler options preserveConstEnums for that:

tsconfig.json

{
  "compilerOptions": {
    ...
    "preserveConstEnums": true,
    ...
  },
  ...
}

Now, let's say you have

const-enum.ts

export const enum MyConstEnum {
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

You can import it in component like:

import * as constEnumModule from './const-enum';

class SomeComponent {
  MyConstEnum = (constEnumModule as any).MyConstEnum;
}

It finally it should be available in your template for this component:

<span *ngIf="name === MyConstEnum.Value1">This has some value</value>

answered Aug 10, 2020 at 9:31

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

Typhon Over a year ago

As I undestand this, preserveConstEnums replaces const enums with lookup tables instead of inlining the enum values, which is the main purpose of the const enums, at this point you'd rather have non-const enums instead of const enums. preserveConstEnums should be mainly used for debugging purpose.

Qwertiy · Accepted Answer · 2021-07-12 10:49:58Z

2

I can see on this link https://github.com/angular/angular/issues/25963 that it is known issue and it is specifically with const enum.

There is also a work arround suggested in the discussion on the url:
templateImports: [someConstant, UserStatus, isDevMode]
This would not work, but the below could:

templateImports: {someConstant, UserStatus, isDevMode}

edited Jul 12, 2021 at 10:49

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

answered Aug 10, 2020 at 8:53

Apurva Pathak

7961 gold badge9 silver badges26 bronze badges

4 Comments

renathy Over a year ago

What is templateImports? Where is definition of templateImports somehwere in Angular docs?

yurzui Over a year ago

Have you tried it yourself? That was only suggestions and it wasn't implemented

Apurva Pathak Over a year ago

I have not tried I said I came across this information if it might help

Kyle Gibbons Over a year ago

What you linked to is a feature request, not a bug report. The templateImports functionality does not exist.

James Gronowski · Accepted Answer · 2023-02-27 23:42:23Z

-2

You can create a property of the same name as the enum inside your component and you'd be able to access the enum just as you would within your ts file. You can do this by either importing it or declaring it within the ts file if preferred:

import { MyConstEnum } from './enum'

OR

enum MyConstEnum {
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.page.html',
    styleUrls: ['./my-component.page.scss'],
})
export class MyComponent {
    MyConstEnum = MyConstEnum;
    ...
}

And within the html template:

<span *ngIf="name === MyConstEnum.Value1">{{ MyConstEnum.Value1 }}</value>

answered Feb 27, 2023 at 23:42

James Gronowski

252 bronze badges

2 Comments

Benito-B Over a year ago

This is not using a const enum, you just named your enum constEnum... that does NOT make it const. The issue is with enums using the const keyword, as you can't reassign them like you did in your class.

James Gronowski Over a year ago

You're right, misread the question. Either way I hope it helps people do it a bit more simply than the last function in the OP's question.

AmirHossein Rezaei · Accepted Answer · 2022-07-03 11:09:10Z

-3

I bypassed this issue by replacing my const enum types to static properties inside classes like this:

export class MyEnum{
    static  Value1 = 'Value1',
    static  Value2 = 'Value2',
    static  Value3 = 'Value3'
}

answered Jul 3, 2022 at 11:09

AmirHossein Rezaei

1,4982 gold badges22 silver badges22 bronze badges

1 Comment

Andre Elrico Over a year ago

how is that better then a normal js-object?

Collectives™ on Stack Overflow

Accessing const enums in Angular html template

4 Answers 4

1 Comment

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related