Pass enums in angular2 view templates
<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>