How to use enum within HTML?

Question

When I reference to an enum value I am getting below error.

ERROR TypeError: Cannot read property 'Text' of undefined

Is there any way to use this enum within html part of component?

My Enum;

 export enum InputType {
    Text = "text",
    Number = "number",
    Color = "color"
}

My component;

export class AppComponent {
  title = 'app';

  inputType : InputType;

}

html part;

<app-input [inputType]="inputType.Text"></app-input>

You need to assign the inputType -> inputType = InputType;. Otherwise, inputType is declared as type "InputType" but is never assigned, hence it will be undefined at runtime. — briosheje
– briosheje, Commented Sep 12, 2018 at 8:36

briosheje · Accepted Answer · 2018-09-12 08:38:42Z

2

Change:

export class AppComponent {
  title = 'app';

  inputType : InputType;

}

to:

export class AppComponent {
  title = 'app';

  inputType = InputType;

}

Otherwise, inputType will be treated by typescript as an InputType, but will never be assigned, hence it will be undefined at runtime (and angular will throw the exception as stated above, since it's trying to access a property of an undefined component property).

answered Sep 12, 2018 at 8:38

briosheje

7,4662 gold badges35 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

How to use enum within HTML?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related