Interpolation In Angular – By Sagar Jaybhay

It is called as data binding and in angular, we have 3 categories of data binding.

• One Way data binding: it is from component to view template
• One way data binding: it is from view template to component
• Two-way data binding: it is from component to view and vice versa.

One Way Data Binding:

In interpolation you can use mathematical operation, validation, condition checking. By using interpolation you can bind class properties to element properties. Interpolation is all about moving class data to html template in one direction means component class properties to html element properties.

<img style="height: 200px; width: 200px" src="{{ imagePath }}" /> 

Property Binding:

Property Binding and Interpolation flow data from one direction.

<img style="height: 200px; width: 200px" [src]="imagePath" />

Interpolation v/s Property binding

• Interpolation is special syntax that angular converts into a property binding.
• In concatenation of string we can use interpolation instead of property binding
• To set an element property to a non-string data value, you must use property binding
• You can use canonical variation means for binding to property of html element rather than using [] braces use bind-property-name.

<span bind-innerHtml="_first"></span>

• For security reason angular data-binding automatically sanitizes malicious content before displaying it on browser.

DOM: Angular all about binding to dom object properties and not html attribute

Audio Url – https://audiomack.com/song/sagar-170/interpolation-in-angular-by-sagar-jaybhay