Two Way Data Binding In Angular
In this article, we will learn about Angular two-way data binding and how NgModel implements it in Angular Forms. The ngModel directive is part of the FormsModule and is a built-in directive. The [()] syntax is used for two-way binding.
What is Two-way data binding?
Changes to our component's model are propagated to the view, and any changes to the view's data are immediately updated in the underlying component data.
In data entry forms, two-way data binding is more useful. We'd like to update our model whenever a user makes a change to a form field. Similarly, we'd like to refresh the view when we update the model with new data.
Property binding and event binding are used in tandem to create two-way data binding. Property binding is one method of connecting a component to a view. The event binding connects the view to the component in only one direction. The Two-way bond is created by combining both.
Two-way using property & Event Binding
The following example demonstrates how to accomplish two-way binding by combining property and event binding.
Create a new angular application using the following command:
ng new two-binding
<h2>Example 1</h2>
<input type="text" [value]="name" (input)="name=$event.target.value">
<p> You entered {{name}}</p>
<button (click)="clearName()">Clear</button>
name=""
clearName() {
this.name="";
}
The input element's name attribute is bound to it ([value]="name"). We also use the (input)="name=$event.target.value" event binding. When the input changes, the name property is updated. The Angular interpolation updates the {{name}}, so we know the value of name property.
Two-way binding syntax
The two-way binding is achieved in the following example by combining event and property binding . However, the notation [()] in Angular provides a mechanism to establish a two-way binding. It's worth noting that both square and parenthesis are used in this example. The syntax is currently known as Banana in a Box. The property binding is shown by the square, whereas the event binding is indicated by the parenthesis.
For Example,
<someElement [(someProperty)]="value"></someElement>
Both property and event binding is set up using the syntax above. However, in order to use it, the property must use the following naming convention.
If we're binding to an element's settable property named someProperty, the element must also have a change event named somePropertyChange.
Most HTML elements, on the other hand, have a value property. However, instead of a valueChange event, they normally have an input event. As a result, they can't be used in the syntax above.
The following example will not function since the input element does not support the valueChange event.
As a result, we have the ngModel directive.
What is ngModel
The ngModel directive is used by Angular to achieve two-way binding on HTML Form components. It is bound to a form element such as input, select, textarea, and so on.
It uses ngModel in property, binding to bind to the value property, and ngModelChange to bind to the input event internally.
How to use ngModel
The ngModel directive isn't included in the Angular Core package. It's a module from the FormsModule library. The FormsModule package must be imported into your Angular module.
Use the following syntax in the app.component.html:
<input type="text" name="value" [(ngModel)]="value">
As above example, the ngModel directive is placed inside the square and parenthesis. The Template Expression is in charge of this. The component class has a property called Template Expression.
ngModel Example
Import FormsModule
open the app.module.ts and add the following code:
import { FormsModule } from '@angular/forms';
<h2>Example 2</h2>
<input type="text" name="value" [(ngModel)]="value">
<p> You entered {{value}}</p>
<button (click)="clearValue()">Clear</button>
value="";
clearValue() {
this.value="";
}
The ngModel data property sets the value property of the element, and the ngModelChange event property listens for changes to the value.
When you run the project, you'll notice that the component class model updates automatically when you change the name.
Custom Two-way binding
To make [()] function, we need a property named <nameofProperty> Change and a change event named <nameofProperty> Change.
We don't have any HTML Elements that meet the naming rules outlined above, but we can design a new component that does.
Create a new component called counter.component.ts and paste the following code into it.
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'counter',
template: `
<div>
<p>
Count: {{ count }}
<button (click)="increment()">Increment</button>
</p>
</div>
`
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange: EventEmitter<number> = new EventEmitter<number>();
increment() {
this.count++;
this.countChange.emit(this.count);
}
}
There are two properties of the component. The first is the input property count, which is adorned with @Input(). An event (or output property) is the other in, which we decorate with @Output(). The input property is called count. As a result, the output attribute is changed to countChange.
Using the syntax [(count)], we can now use this component to build two-way binding to the count property.
<h2>Example 3</h2>
<counter [(count)]="count"></counter>
<p> Current Count {{count}}</p>
<button (click)="clearCount()">Clear</button>
Conclusion
The two-way binding mechanism is a basic but effective technique. To achieve two-way binding, we use Property binding and Event binding. The [(value)] syntax in Angular is used to set up the two-way binding. It sets up Property binding to the element's value property automatically. It also configures the valueChange Property's event binding. However, unless we design our own component, we don't have many HTML elements that satisfy those naming rules. This is where the FormsModule ngModel directive comes in, providing two-way binding to all known HTML form elements.
I hope this article helps you and you will like it.👍
If you have any doubt or confusion then free to ask in comment section.