angular - Property binding vs attribute interpolation -

i have read article difference between property , attribute bindings. understood, of time, angular2 prefers property bindings, because after each change in data, dom updated. (if mistaken, please correct me).

i have custom component , use parent component. in it, have @input named truevalue. when initiate truevalue parent via property binding, sometimes, not change. used following code:

<my-checkbox [(ngmodel)]="chkitems" [disabled]="!editmode" [truevalue]="y"></my-checkbox> 

if send true or "1" truevalue works, if send "y" or "yes", not work. forced use attribute binding. don't know problem.

i have changed it, following:

<my-checkbox [(ngmodel)]="chkitems" [disabled]="!editmode" truevalue="y"></my-checkbox> 

thanks in advance

property binding like

[truevalue]="..." 

evaluates expression "..." , assigns value

"true" evaluates value true "y" unknown. there no internal y value in typescript , no property in component class instance, scope of template binding. in case want

[truevalue]="'y'" 

note additional quotes make y string.

plain attributes assigned inputs

truevalue="y" 

is plain html without angular2 binding , attribute values strings. therefore assign string y.

another way string interpolation

truevalue="{{true}}" 

would assign value "true" (as string) because expression withing {{...}} evaluated , converted string before passed input. can't used bind other values strings.

to explicitly bind attribute instead of property can use (besides truevalue="y" creates attribute doesn't evaluation)

[attr.truevalue]="'y'" 

or

attr.truevalue="{{'y'}}" 

attribute binding helpful if want use truevalue attribute address element css selectors.