Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between interpolation and property binding

Tags:

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 }} > 
like image 753
koninos Avatar asked May 20 '16 13:05

koninos


People also ask

What is the difference between property binding and event binding?

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.

What is difference between interpolation and data binding in Angular?

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.

Which binding is similar to property binding?

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.

What is property binding with example?

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.


1 Answers

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.

like image 92
Mark Rajcok Avatar answered Sep 20 '22 16:09

Mark Rajcok