Angular 5 and Enums at html view from different file

Question

I was trying to define the enum in another file to use it in other places as well. For example on html view. Is this possible?

enums.model.ts

export enum MyEnum{
    First = 1,
    Second= 2
}

my-summary.component.ts

import {MyEnum} from "./app/models";
@Component({
    selector: "my-summary",
    templateUrl: "./my-summary.component.html"]
})
export class MySummaryComponent{ }

my-summary.component.html

   <div>
      {{MyEnum.First}}
   </div>

And it doesn't work. Module '"path/app/models/index"' has no exported member 'MyEnum'.

Possible duplicate of How to use enum in Angular 2 templates — Jota.Toledo
– Jota.Toledo, Commented Jan 11, 2018 at 13:55
what is in your index.ts file? If your dont have one then look at Sachila's answer below.. Path should be: "./app/models/enums.model" Having said that I've never been able to import a enum in angular 4. — SkyReel
– SkyReel, Commented Feb 2, 2018 at 17:37

Sachila Ranawaka · Accepted Answer · 2018-01-11 13:46:58Z

12

Assign enum to a variable inside component.

import {MyEnum} from "./app/models";
@Component({
    selector: "my-summary",
    templateUrl: "./my-summary.component.html"]
})
export class MySummaryComponent{
   MyEnum = MyEnum;
 }

answered Jan 11, 2018 at 13:46

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

3 Comments

DiPix Over a year ago

Still error

ERROR in path/my-summary.component.ts(9,10): error TS2305: Module '"path/app/models/index"' has no exported member 'MyEnum'.

Sachila Ranawaka Over a year ago

path should be import {MyEnum} from "./app/models/enums.mode";

godblessstrawberry Over a year ago

any other way to achieve this globally? I have "CountryCodes" enum and I need to access it in structural directive that restricts block in various components by countrycodes and some other input params - so I will need to import this every time I want to use the directive(

Collectives™ on Stack Overflow

Angular 5 and Enums at html view from different file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related