How to fix TypeScript enum not working within HTML?

Spread the love

Sometimes, we want to fix TypeScript enum not working within HTML.

In this article, we’ll look at how to fix TypeScript enum not working within HTML.

How to fix TypeScript enum not working within HTML?

To fix TypeScript enum not working within HTML, we make the enum an instance variable of the component.

For instance, we write

enum Quarters {
  Q1,
  Q2,
  Q3,
  Q4,
}

export class AppComponent {
  quarter = Quarters.Q1;
  Quarters = Quarters;
}

to set Quarters.Q1 to quarters and Quarters to Quarters.

Then in the component’s template we write

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div>

to use the instance variables in the template.

Conclusion

To fix TypeScript enum not working within HTML, we make the enum an instance variable of the component.

Leave a Reply

Your email address will not be published.