Angular 4.0 : What is Angular Property Binding?

Angular Property Binding

What is Angular Property Binding?

It is one way data binding like interpolation. It is used to bind values to the DOM properties of the HTML elements. 

One Way Data-Binding

  From Component    →    View Template 

In the Angular for property binding we used square brackets: []

Let us take an example of Property binding and interpolation:- 

In this an example, I have taken html image tag and set its properties like src, height and width. 

Syntax of Property Binding:-

    <b>Property Binding Example</b><br /><br />
    <img [src]='PropertyBindingImagePath' [height]=ImgHeight [width]=ImgWidth />

Syntax of Interpolation:-

   <b>Interpolation Example</b><br /><br />
   <img src='{{interpolationImagePath}}' height={{ImgHeight}} width={{ImgWidth}} />

Output

Both are showing the same result only difference is syntax writing. If both are working same way why property binding is required and what is difference between property binding and interpolation?

Interpolation v/s Property Binding

• Interpolation is a special syntax that angular converts into a property binding.
• To concatenate strings we must use interpolation instead of property binding.
• To set an element property to a non-string data value, you must use property binding.

Example

Take a property isDisabled Boolean type and set value true

Take two buttons, set disabled property with class property

Output

We can see both buttons are disabled, they are working fine. 

As we see result, property binding button is working fine but interpolation button is not working fine. Here we can see the difference in both the data binding. So always careful about to use property binding and interpolation binding.

There are some rule when property binding is used

• Always property name comes with square brackets like []
• Canonical Form : In the canonical form, we use bind- key word at the place of []

   <!--Cononical way of writing -->
   <button id='btnCanonicalForm' bind-disabled = 'isDisabled'>Canonical Form</button><br/><br/>

Output

Content security(malicious content)

It is good thing about the Angular data binding that it handles malicious or harm content before display on the browser. In the both binding, it sanitizes the malicious values and render the content harmlessly.

Let us take an example :

      export class AppComponent
      {
         isDisabled:boolean=false;  
         /** Malicious Content **/
         badTitle = 'Template <script>alert("I am malicious content")</script>Syntax';
         interpolationImagePath:string='assets/Images/Jaguar.jpg';
         ImgHeight:number=80;
         ImgWidth:number=150;
         PropertyBindingImagePath:string='assets/Images/Leopard.jpg';
       }

<!-- Sanitizes malicious content -->
<div> Interpolation binding showing malicious content = {{badTitle}} </div>
<div [innerHtml] ='badTitle'></div>

Output