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?

Did you try attribute binding? <field-option [attr.type]="_field.type"> — Sasxa
– Sasxa, Commented Feb 23, 2016 at 9:15
See github.com/angular/angular/issues/6970#issuecomment-182025921 — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 23, 2016 at 9:17
@Sasxa [type]="_field.type" this doesn't do anything to DOM (no type attribute at all), [attr.type]="_field.type" does adds type attributes, but doesn't renders the right component. Confusing. — Shane Hsu
– Shane Hsu, Commented Feb 23, 2016 at 9:48
Does your <field-option> component have @Input() type? Maybe you could just use selector 'field-option' and use type as property... — Sasxa
– Sasxa, Commented Feb 23, 2016 at 9:52

Günter Zöchbauer · Accepted Answer · 2016-02-23 09:10:02Z

2

<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 :-/

answered Feb 23, 2016 at 9:10

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1