AngularTwo Way Data Binding
Posted By : Anchal Gaur | 30-Oct-2017
Data binding is very important and "wow" feature in angular which is used to bind the data dynamically. In this topic modification in the application, state has been unconditionally reflected in the view and vice versa. By setting a configuration value we can construct our own directives with the scope properties of two-way data bound.
Data binding is an extensive technique that binds data sources from the mainstay and consumer together and synchronizes them. This is usually done with two data/statistics sources with different languages
Implementation of two-way data binding
There is one directive which is used to implement two-way data binding i.e ngModal. It is not that much hard as we think so, In fact, it turns out that two-way data binding really comprises the event binding and property binding.
let's take a look to see the code so that we can understand what it means.
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
In this demo when we typing into the input, the input value is written into the username modal and the result is reflected back into the view.
Properties in data binding
[value]=”username” - It binds the expression username to the input element’s value property
(input)=”expression” - Is a declarative way of binding an expression to the input element’s input event.
username = event.target.value - This is an event that gets executed when the input event is fired.
$event - Is an expression exposed in event bindings by Angular, which has the value of the event’s payload
<input [ngModel]="username" (ngModelChange)="username = $event">
<p>Hello {{username}}!</p>
property binding takes care of updating the input DOM element and the event binding notice the outside world when there was a change in the dom. As well as handler expression only uses event and no longer 'event.target.value'. The event is the payload of the emitted event.Angular allows the shorthand syntax which is called banana in the box.
Customs with two-way data binding
We can construct our own custom two-way data binding by the following rules.
1. Introduce a property binding.
2. Introduce an event binding with the same name
Conclusion
Angular doesn't come with built-in two-way data binding but with the API we can implement this type of binding using event binding and property binding
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Anchal Gaur
Anchal has a good knowledge of HTML,CSS and Javascript. She is working here as a UI Developer. Her hobbies are travelling and to read novels in free time.