What is Angular Data Binding and How does it help in Web Development?
The web development field requires data mapping between models and views. The?models basically contain the data values (Functionalities) whereas views deal with what the user sees. So, if you want to know how this happens in Angular, this blog will help you.
The topics that are discussed over here:
What is Data Binding?
It is the mechanism that binds the UI (User Interface) to the models.
Using Data Binding, the user will be able to manipulate the elements present on the website using the browser. Therefore, whenever some variable has been changed, that particular change must be reflected in the Document Object Model or the?DOM.
Types of Data Binding in Angular
Angular allows both One-way and Two-way Data Binding.?
One-way data binding?is a simple type of data binding where you’re allowed to manipulate the views through the models. This implies making changes to the Typescript code will be reflected in the corresponding HTML.
?In Angular, One-way data binding is achieved through:
Two-way data binding?on the other hand, allows synchronization of data in such a way that the views can be updated using the models and the models can be updated using views. This means that your application will be able to share information between a component class and its template.
One-way Data Binding
In one-way data binding, data flows only in one direction i.e., from the models to the views. As mentioned earlier, one-way data binding in Angular can be of three types i.e., Interpolation, Property binding, class binding and Event binding.
Interpolation Binding:
String interpolation is a ONE-WAY DATA BINDING technique, which is used to output the data from typescript code. The syntax of binding a filed using double curly braces is called “BINDING EXPRESSION”.
Simply, Interpolation is way of binding data from?CLASS TO TEMPLATE.
Interpolation defines how the data is sent to view from model or class. Initially data is always in a static mode. But in every development, it needs Dynamic data that is visible to the user.
It can be implemented in this way.
This is the component.html. We have given our html name as test.component.html.
This is the page where users can view the content.
Here, we initialized the local variable name with some content and this data has to be shown in UI.
This is the output we can see and observe the Interpolation (Displaying contents)
Don’ts in interpolation:
?????Ex: {{x=7}}
?????{{window.location.href}}//Our site location
Property Binding:
Before knowing this briefly, first we have to know the difference between Html Attribute and DOM Property. In console we can observe the difference between them.
For example:
In Html Attribute, if we change data in user interface it shows the same value which we have given in the value in the input form. (Once initialization done never changes)
But in Dom, it is going to update the value in the user interface we will get the modified data in the dom.
Example:
<input type=”text” value=” hello”>
In console,
$0. getAttribute(‘value’) //hello (Html Attribute)
$0.value// hello
Now,
Value in UI changed as?hiiiii,
$0. getAttribute(‘value’) //hello
$0.value// hiiii
领英推荐
Means we can clearly see the difference b/w both HTML Attribute and DOM Values and html attributes never change dynamically.
Basically, interpolation does not allow Boolean values to work with them.
In order to achieve this, we use?Property Binding
?
We can implement property binding by using [].
We can observe that disabled have the Boolean values default. Interpolation does not allow Boolean values. In order to overcome that property binding plays a vital role.
By using this binding, we can achieve this.
Class Binding:
Very important concept in binding.?Use class and style bindings to add and remove CSS class names from an element’s?class?attribute and to set styles dynamically.
It is used to bind the class properties to the html elements. Like we can apply a class style to our required html element. No need to write the same thing every time. Like we can see below.
We can observe the differences among all. We have taken any class that is in the .CSS file to Html file. This is the major advantage of this class binding
And one more thing, we can also do group class binding. Means we can apply more CSS properties to one element. As we observed in the above code.
Event Binding
The Event binding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc. In Angular, event binding can be achieved by specifying the target event name within regular brackets on the left of an equal to (=) sign, and the template statement on the right side within quotes (” “).
Class to view-Property Binding
View to class-Event Binding.
Here we can observe the thing that, whenever we click on the?Click Me?then only the function?onClick()?called and action will be implemented.
And that function is implemented here and that is when click on Click Me it will show the output as Welcome to sails software .
Before clicking
After Clicking button, we got this.
Two-way Binding
Angular allows two-way data binding that will allow your application to share data in two directions i.e., from the components to the templates and vice versa. This makes sure that the models and the views present in your application are always synchronized. Two-way data binding will perform two things i.e., setting of the element property and listening to the element change events.
The syntax of two-way binding is – [()}. As you can see, it is a combination of the property binding syntax i.e. [] and the event binding syntax (). According to Angular, this syntax resembles “Banana in a Box”.
Summary:
Note:
{ }=Method Definition
{{}}=Interpolation
[]=property Binding
()=Event Binding
Data Binding plays an important role in Web Development. In order to get any data from model to view dynamically we should go through this.
Written by
(Associate software Engineer)