Data Binding In Angular
What is binding?
It is a process of establishing a connection between application UI and data which it displays.
Data Binding :
Data Binding is one of the important concept in Angular ,It is synchronization of data between the model and view components.
- It is a bridge between two components of angular that is model part and view part.
When data in the model changes, the view updates (reflects)the change, and when data in the view changes, the model is updated as well.
How Data Binding is Possible in Angular:
when we clear the concept of binding and data binding, the question arises what makes it possible to do data binding in Angular?
The answer to this is “Directive”. The directive in Angular used to bind the value of the input field (such as text field ,text area) to the HTML element is ngModel. An ngModel directive is used to perform data binding in angular.
Types of Data Binding:
- One-way Binding
- Two-way Binding
One-way Binding :
One-way data binding, the flow of data send to one side only and that is from model to view.
- One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component.
- Data exchange between the component and the view will help us to build dynamic and interactive web applications(It displays different content each time it’s viewed.).
- One-way data binding from view to the component can be achieved by using the event binding technique.
Let's consider an example where within parentheses on the left of the equal sign we have the target event like "click" and on the right side we may have the template statements such as component properties and methods(myFunction()) bind to the event.
In the above code, the myFunction() method in the component will be called when user clicks on the button.
Filename app.component.ts
Once you run the above code, you will see a button with text “Show alert”. When you click that button, it will call the myFunction() method in the component, which will, in turn, execute the alert() method, showing an alert box with the text “Show an alert”.
Two-way Binding :
Two-way data binding is the exchange data from the component to view and from view to the component.
- It will help users to establish communication bi-directionally approach(both the side).
- That means the flow of data does not restricts to one side only.
Two-way data binding can be achieved using a ngModel directive in Angular. The below syntax shows the data binding using (ngModel), which is basically the combination of both the square brackets of property binding and parentheses of the event binding.
<input type="text" [(ngModel)] = 'val' />Bind data using (ngModel) as shown below:
Once we run the above code, we will see an input box asking us to enter a value in the view. Any value entered in that input box will be bound with the text below. Let’s assume a user entered the text “Shivani”, then the text will be “Entered value is: Shivani”.
I hope this guide has been helpful for you. If you would like to explore more concepts on Angular, check out this video:
