I have a component which defines an imageUrl
property and in my template I use this property to set the url of an image. I tried this using interpolation and using property binding, both work, but I cannot find any differences between the two, or when to use the one over the other. Does anyone know the difference?
<img [src]='imageUrl' > <img src= {{ imageUrl }} >
Property binding is the same thing as interpolation, except you can set the properties and attributes of various HTML elements. Event binding allows you to define events that occur in the template (user-initiated), and communicate to the component class.
We can display all kind of properties data into view e.g. string, number, date, arrays, list or map. Data binding consist of one way data binding and two way data binding. Interpolation is used for one way data binding. Interpolation moves data in one direction from our components to HTML elements.
String interpolation and Property Binding It's a convenient alternative to property binding. When you need to concatenate strings, you must use interpolation instead of property binding. Property Binding is used when you have to set an element property to a non-string data value.
Property binding is an example of one-way databinding where the data is transferred from the component to the class. The main advantage of property binding is that it facilitates you to control elements property. We are going to add a button to "component.
Angular evaluates all expressions in double curly braces, converts the expression results to strings, and concatenates them with neighboring literal strings. Finally, it assigns this composite interpolated result to an element or directive/component property. -- from https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation
Property binding does not convert the expression result to a string.
So if you need to bind something other than a string to your directive/component property, you must use property binding.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With