What is Data Binding in Angular? Property Binding, Event Binding, String Interpolation, and Two-way Data Binding.

Today we will look at Data binding in Angular and various types of it :

1. Property Binding.
2. Event Binding.
3. Two-way Binding.
4. String Interpolation.

We will also see the difference between Property Binding and String Interpolation and Property Binding and which one to use when, so let’s get started.

We know that for every component we have a template file (component.html) and typescript file (component.ts). In the template file, we write our Html code and in typescript, we write our logic. Data Binding acts like a communication mechanism between template and typescript. Like we are showing some Info in the template but after we get data from the server or something we need to show the updated info.

So basically how can we make our template dynamic? This is where String Interpolation kicks in. It allows you to bind your data from typescript to template any change in that variable will reflect the change in UI. Let’s take an example.

String Interpolation

Initially, “Data is coming from server” will be shown In UI after a minimum of 2 seconds() when the data is assigned a new value by setTimeout function then it will reflect the change in UI. So for accessing the value from a typescript file the syntax is “{{data}}”.

So we can use Interpolation for displaying text. One thing to keep in mind is the info we are trying to display should be a string or something which can be resolved to string.We can use ternary operators in String Interpolation, The only thing is it should contain only one line of code we can’t write multiple lines of code.

Suppose there is a button that can be used to perform some operation but that operation is not allowed for everyone only some selected users are allowed to do that so for that we might have to check for permissions which we get from the server. So we have to dynamically update the state of the button (enable/disable) and also maybe the name of the button depending upon the scenario. This is where Property Binding can help us. Let’s take an example.

Property Binding.

Initially, Button is Disabled with Loading text after a minimum of 2 seconds(Due to the way how Event Loop Works) the button will be enabled and Text will be “start”.

So with Property Binding, we can change the properties of Html Elements.

Instead of using String Interpolation, we can also use [innerText]=”buttonName” to change the text. But there is nothing wrong with String Interpolation.

String Interpolation and PropertyBinding are useful for change detection from typescript to UI. For detecting changes in the template and notifying typescript to perform some operation we have something called Event Binding.

Now suppose if the user clicks on a button we should be able to listen to this click event in Typescript and do the operation and the same goes when goes for input field changes and many other scenarios. Let’s look at a code snippet to understand. This code snippet is an extension of the previous code snippet.

When the button is enabled we will be able to click it and on clicking it will call the print() method. What if we also want to pass some data from the template like when we are listening to input changes for that we have a reserved keyword event.

It will trigger for every change in the input field and thus we can do validation and all or some other things like autocomplete or suggestions.

Now we have seen binding only in one way like from UI to Typescript or Typescript to UI. What about having 2-way binding? We can also achieve that using the above approaches discussed but angular provides us ngModel directive for 2-way binding. Let’s look at this first we will do without ngModel then with ngModel.

This is without “ngModel ”, we are using both EventBinding and String Interpolation for listening and reacting. Now with ngModel.

That’s it. if you check the syntax of [(ngModel)] it is combining the Property Binding and Event Binding which makes sense.

Thanks for reading :)