title: How to use an enum in an Angular Component
body: <p>My Angular Components tend to have a global state (or "mode") so I am looking for a way to code this efficiently.  What I tried to do is this:</p>
  
  <pre><code>@Component({
        ....
  })
  export class AbcComponent implements OnInit {
  
    enum State {
      init, view, edit, create, wait
    }
    state: State = State.init;
  </code></pre>
  
  <p>The idea is that the functions inside AbcComponent can drive the template's operation simply by setting the <strong>state</strong> property.  For example:</p>
  
  <pre><code>&lt;div class="col" *ngIf="state === State.view"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the <strong>enum</strong> definition cannot appear inside the <strong>class</strong> structure.  And then if I move it outside the <strong>class</strong> structure then the template doesn't have it within its local scope. </p>
  
  <p>Is there a different way to do this? </p>
  
  <p>P.S. If it is of any interest what I have been doing is I have several <strong>boolean</strong> properties, one for each state.  For example <strong>modeInit</strong> <strong>modeView</strong> etc.   It works but it is clumsy because only one should be <strong>true</strong> at a time.</p>