Two way data binding in Angular2
Posted By : Swati Rahangdale | 29-Sep-2017
Custom define Two-Way Data Binding in Angular 2
There are three types of data bindings in Angular 2, they are as follows:
1.Interpolation
2.Event Binding
3.Property Binding
Angular does not have a build in two way data binding.it can be reached by using nModel directive. Interpolation used Double curly braces contain template statements which grant us to read primitive or object values from the component.
model with two-way data binding
Two-way data binding combines the input and output binding into a single system using the ngModel directive.
Angular 2 gives us a directive ngModel to achieve two-way data binding. It is very simple and direct to use ngModel directive.
Example.
import {Component} from '@angular/core';
@Component({
moduleId:module.id,
selector:'my-app',
template:`
<div class="container id">
<input [(ngModel)]='name' />
<br/>
<h1>hii{{name}}</h1>
</div>
`
})
export class AppComponent{
}
Two-way data binding without ngModel
To know ngModel directive working, let us see how we can chase two-way data binding without using ngModel directive. To do that, we need to use
Data binding to bind define to value property of the input element.
Event binding to emit input event on the input element. Using event binding, input event would be bind to an define.
Custom two-way data binding angular2
We should be very focused whether to create a custom two-way data binding or rely on the ngModel directive. Do not have to create custom two-way data binding regularly. it is superior to have steps to build a custom two-way data binding. To create a custom counter component with two-way data binding enabled.
follow the 3 steps:
Step 1
To Create a component with two buttons and increment and decrement method.
over we have created an ideal simple component to increment and decrement the count. use this component inside another component, after all, two-way data binding is not enabled on this component. we need to use Input and Output properties.
Step 2
Create a getter with Input property and return count. actually, it is applied with Input decorator, consumer of this component can bind this value using the property data binding.
Step 3
To create two-way data binding we need to have an event of the type EventEmitter. This event emitter is attributed with output decorator it can be emitted to the component. We design event object in the constructor of the component.
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
Swati Rahangdale
Swati has good konwledge of HTML,CSS, Boostrap.now . She is a UI developer. Her hobbies are watching movie.