How to use an enum in an Angular Component

You can define the State enum outside of the class, possibly in another file:

export enum State {
  init, 
  view, 
  edit, 
  create, 
  wait
}

and assign the enum to a public field in the class:

import { State } from "../models/app-enums.model";

@Component({
  ....
})
export class AbcComponent implements OnInit {
  public StateEnum = State;
  public state = State.init;
  ...
}

That public field can then be used to refer to the enum in the template:

<div class="col" *ngIf="state === StateEnum.view"> ... </div>

You can define a method or getter and compare your current state value with the enum already imported. Like this:

import { State } from "../models/state-enum.ts";

@Component({
  ....
})
export class AbcComponent implements OnInit {
  private state: State = State.init;
  ...
  get isView() {
    return this.state === State.view;
  }
}

template.html

<div *ngIf="isView">Oh is view!</div>