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'.

Answer 1

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;
 }