Angular 2 – Data Binding

Angular Data Binding

What is Data Binding(Interpolation, Property Binding, Event Binding) in Angular?

 

Data binding is a technique that binds data from view(User or Front-end) with component(Logic Block or back-end). Means how data flow from user input and what data comes when user perform some action.

Data-binding play an important role in any Angular App, especially two way data binding, but Angular 2 doesn’t have built-in two-way data binding as it was present in Angular JS or Angular 1 version. With the help of  ngModel we can achieve two way data binding in our application.

There are three types of data bindings in Angular 2, they are as follows:

  1. Interpolation
  2. Property Binding
  3. Event Binding

Let’s understand them one by one with the following code example.

1. Interpolation or String Interpolation:

String Interpolation is used to access or can say communicate properties likes variables, objects, arrays, etc in to the template, that are declared in component class.

To use template class veritable or any array you need to pass them in {{ propertyName }}.

When you run your application, you will see the proper values of this variables on view on browses.

2. Property Binding:

Property binding is used when we want to add or bind our component class properties to HTML Tag Attributes properties. Means changes in variable values in component class will directly bind with your view HTML Tags Attributes.  Property binding in Angular is one-way or unidirectional data flow, in that communication goes from the component class to the view template .

In our above example add and button and lets bind its Value with component variable btnText.

There are 3 ways to define a property binding in Angular.

  1. Using interpolation {{ … }}
  2. Using square brackets []
  3. Using bind- Keyword

Like this:

3. Event Binding:

In any Application user interacts with view elements like form elements, hovering or click on links and buttons. It’s sometimes necessary to get user input or action to perform certain action. All action are all events that may need to bind with component logic within Angular.

That’s what Angular Event binding is all about.  It’s one-way data binding same as property binding, but data flow is in opposite direction. Event binding sends information or data from the view to the component class. This is just opposite from property binding, where data is sent from the component class to the view.

There are 2 ways to define a event binding in Angular.

  1. wrapping the event in (parenthesis)
  2. by prefixing it with on- Keyword

Now in our previous example let’s add and event on input text and button

Event Binding Example:

Template:

Component:

Now when we type in input, it’s  value will update in component, because we have used property binding on value property. On Clicking on button the same value will update on listItems Array.

 

The same we can achieve using two way binding, But in angular 2 and onward version there is not any concept of two way binding.   In Angular 2 and greater version ngModel is used for two way binding.