Property Binding, Interpolation and Click event handler

In this page, lets go with the things like making/using the button click event and retrieving the data from the class.
a)Property binding :
Property binding is nothing but attaching the property value(from our ts class) to the attribute of the HTML tag. Every HTML tag will be containing the attributes. For example if we take input tag like textbox, then we can have attributes like id,name..e.t.c.
How to define the property binding ?
To bind and get the property value of a class to the attribute, firstly we need to decorate the attribute with in the open and close square brackets (  [attribute] = 'propertyname' ).

Example :

 @Component({  
  selector: 'app-root',  
  template : `<button [disabled]='btnDisabled' > Disabled </button>  
        <button [disabled]='!btnDisabled'>! Disabled </button> `   
 })  
 export class AppComponent {   
  btnDisabled : boolean = true;  
 }  

Explanation :

1)In the above example, I had taken a class “ApComponent” and added a property named isDisabled.
2)within the template of the decorater I had taken 2 HTML button tags.
3)For the both button attributes, I had attached the btnDisabled property by decorating with the open and close brackets.

Result :

b)Interpolation :

Interpolation also provides us a way for binding the property values, to make interpolation we need to enclose the property value within the double open and close curly braces ( {{ propertyname }} ).

To know about interpolation, Please have a look on my page :

Interpolation in angular 2.0

Then what makes the differences between property binding and interpolation ?

Let us try to apply interpolation for the above example :

 import { Component } from '@angular/core';  
 @Component({  
  selector: 'app-root',  
  template : `with property binding : <br/>  
        <button [disabled]='btnDisabled' > Disabled </button>         
        <button [disabled]='!btnDisabled'>! Disabled </button><br/><br/>  
        With Interpolation : <br/>      
        <button disabled={{btnDisabled}} > Disabled </button>         
        <button disabled={{!btnDisabled}}>! Disabled </button>     
        `   
 })  
 export class AppComponent {   
  btnDisabled : boolean = true;  
 }  

Result :

Explanation :
In the above example, to make differences between the interpolation and the property binding I had used both(interpolation & property binding) in the template. For the first two button tags I had used the property binding and for the next two button tags I had used the interpolation.

If you observe the result, The differences can be clearly identified. The interpolation used buttons both are in disabled mode.

Even though I had provided the not disabled {{ ! btnDisabled }} inside the interpolation, It is behaving in disabled mode itself.

Confused about Which one to prefer  ? 

If your property value is plain string value then go for interpolation {{ plaintext/string  }}.  

If your property value is other than string format, then better to choose the property binding.

Binding Click handler :

Here lets know about creation and using the click event over a button control.

In angular 2, to handle the click event, we need to attach the handler by making the attribute “click” within the open and close parenthesis  ( (click) ) And then we need to attach the function name as the value to the attribute ( (clcik)=’functionname()’ ) . The function name needs to be declared within the class of the component.

Example :

 import { Component } from '@angular/core';  
 @Component({  
  selector: 'app-root',  
  template: `count : <span>{{count}}</span><br/>  
        <button id='btn' (click)='Increment()'>Count + 1</button>`  
 })  
 export class AppComponent {  
  title = 'app';  
  //count :any = 0; //property can be of any type allowed  
  //count = 0; //allowed  
  count : number=0;  //number type allowed  
  Increment() {  
   this.count=this.count+1;  
  }  
 }  

Explanation :
In the above  example, within the template I had used the button tag with click handler by assigning the function named “Increment()”.
Within the class “AppComponent” I had taken the property named count of type number.
The function “Increment()” I had declared within the “AppComponent” Class, will increment the property “count” value whenever we click on the button.

Result :

Thank you.