title: Pass enums in angular2 view templates
body: <p>Can we use enums in an angular2 view template?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="Dropdown" dropdownType="instrument"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>passes the string as input:</p>
  
  <pre class="lang-js prettyprint-override"><code>enum DropdownType {
      instrument,
      account,
      currency
  }
  
  @Component({
      selector: '[.Dropdown]',
  })
  export class Dropdown {
  
      @Input() public set dropdownType(value: any) {
  
          console.log(value);
      };
  }
  </code></pre>
  
  <p>But how to pass an enum configuration? I want something like this in the template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="Dropdown" dropdownType="DropdownType.instrument"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What would be the best practice?</p>
  
  <p>Edited:
  Created an example:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {bootstrap} from 'angular2/platform/browser';
  import {Component, View, Input} from 'angular2/core';
  
  export enum DropdownType {
  
      instrument = 0,
      account = 1,
      currency = 2
  }
  
  @Component({selector: '[.Dropdown]',})
  @View({template: ''})
  export class Dropdown {
  
      public dropdownTypes = DropdownType;
  
      @Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
      constructor() {console.log('-- Dropdown ready --');}
  }
  
  @Component({ selector: 'header' })
  @View({ template: '&lt;div class="Dropdown" dropdownType="dropdownTypes.instrument"&gt; &lt;/div&gt;', directives: [Dropdown] })
  class Header {}
  
  @Component({ selector: 'my-app' })
  @View({ template: '&lt;header&gt;&lt;/header&gt;', directives: [Header] })
  class Tester {}
  
  bootstrap(Tester);
  </code></pre>