Conditional in Angular 2 Component Selector

Question

With native HTML input tags, I can do bindings on the type attribute like,

<input [type]="_field.type">

The input element would dynamically change according to the value of _field.type

However, if I have multiple components like this,

@Component({
  selector: 'field-option[type=options]',
  templateUrl: ''
})

And use it like,

<field-option [type]="_field.type">

It does not work, it does not bind.

I can however, get it to work with static value,

<field-option [type]="options">

I would like to know how to get this to work?

Answer 1

<input [type]="_field.type">

works because it's handled by the browser.

<field-option [type]="_field.type">

would need Angular support but that's not (yet?) implemented.

As a workaround you could do something like

<field-option *ngIf="_field.type='type1'" [type]="type1">
<field-option *ngIf="_field.type='type2'" [type]="type2">

I know, cumbersome :-/

See also https://github.com/angular/angular/issues/6970