Property binding vs attribute interpolation

Property binding like


evaluates the expression "..." and assigns the value

"true" evaluates to the value true
"Y" is unknown. There is no internal Y value in TypeScript and no property in the component class instance, which is the scope of template binding.
In this case you would want


Note the additional quotes to make Y a string.

Plain attributes are also assigned to inputs


is plain HTML without any Angular2 binding and attribute values are always strings. Therefore this would assign the string Y.

Another way is string interpolation


would assign the value "true" (as string) because the expression withing {{...}} would be evaluated and then converted to a string before passed to the input.
This can’t be used to bind other values than strings.

To explicitly bind to an attribute instead of a property you can use
(besides trueValue="Y" which creates an attribute but doesn’t do any evaluation)




Attribute binding is helpful if you want to use the trueValue attribute to address the element with CSS selectors.

Leave a Comment