How to use enum in Angular Template

This hack will allow you to use an enum in an Angular template:

public readonly MyMode : typeof MyMode = MyMode;

Full example

Code:

export enum MyMode {
  None = 0,
  FirstMode = 1,
  SecondMode = 2,
}

/* ... */
export class MyModeSelector {
  mode = MyMode.None;

  // Hack to get enum into class
  public readonly MyMode : typeof MyMode = MyMode;
}

Template:

<button (click)="mode = MyMode.FirstMode" />

If this post helped you, please consider buying me a coffee or donating via PayPal to support research & publishing of new posts on TechOverflow

Buy me a coffee