How to conditionally assign attribute value in angular 2?

Question

I'm trying to learn the Angular 2. I have a simple material input tag and I wish to set it's value on a conditon.

<md-input value="dataSelected ? {{selectedDataName}} : ''"></md-input>

I tried to set [value] or dataSelected as {{dataSelected}} or (dataSelected) but it doesn't do the trick. Can someone lead me into right direction?

No errors. If i leave it as: value="dataSelected ? {{selectedDataName}} : '' " The result in field is: dataSelected ? TestName1 : '' - so it correctly converted only the selectedDataName. What should be the correct syntax in your opinion? I'll test it out and show you the result. — Morgoth
– Morgoth, Commented Dec 16, 2016 at 8:09

ranakrunal9 · Accepted Answer · 2016-12-16 08:12:19Z

15

Instead of value="dataSelected ? {{selectedDataName}} : ''" you can set it value with below possibile ways :

<md-input [attr.value]="dataSelected ? selectedDataName : ''"></md-input>

or

<md-input [value]="dataSelected ? selectedDataName : ''"></md-input>

or

<md-input value="{{dataSelected ? selectedDataName : ''}}"></md-input>

edited Dec 16, 2016 at 8:12

answered Dec 16, 2016 at 8:07

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

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

4 Comments

Morgoth Over a year ago

It seems that <md-input [value]="dataSelected ? selectedDataName : ''"></md-input> had worked as expected. Thank you !

Konrad Viltersten Over a year ago

@Morgoth Not sure if it's for different browsers or if it's the tooth of time biting the suggesting but on my system, I get a title popup anyway. The resolution I had to use is binding to a backing field being set condition?"title text":null. So vasically the same junk as suggested but my unk has to be null (or undefined) not empty string.

frIT Over a year ago

@KonradViltersten This short article explains that null causes Angular to remove/completely omit the attribute itself, instead of adding an empty attribute. Small but important difference for your case (and mine).

frIT Over a year ago

@KonradViltersten just to add a nasty caveat to the previous comment: [maxlength]="null" omits the attribute, but [maxLength]="null" (notice the capital L) converts to maxlength="0" (!!!)

Collectives™ on Stack Overflow

How to conditionally assign attribute value in angular 2?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related