In this article you will learn how to do two-way data binding in Angular using ngModel directive.
What is two-way binding
Angular one way data binding provides unidirectional binding either:
From component (Type Script code) to template (HTML view) in the form of String interpolation, property binding.
OR
From template (HTML view) to component (Type Script code) in the form of event binding.
In Angular two-way binding both of these one way bindings are combined to create a two-way flow of data between a component class and its template. So, two-way binding does both of these-
- If a property in the component is changed that change flows to the view.
- Same way change in view is reflected in the bound property in the component.
You can see that the former is property binding where as the latter is event binding and the combination of both results in two-way binding in Angular.
Syntax of Angular two-way binding
Syntax for two-way data binding in Angular is [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, ().
This syntax for two-way binding is also known as banana in a box.
[( )] = BANANA IN A BOX
It is just a visual way to remember that the parentheses go inside the brackets.
How to use two-way binding in Angular
In Angular ngModel directive is used for two-way bindings. It simplifies creating two-way data bindings on form elements like input element.
[(ngModel)] = "[PROPERTY_IN_COMPONENT]"
For example: <input type="text" [(ngModel)]="userName" />
If userName property in the component has an initial value that is shown as the value of the input. Also any change in the value done by the user in the view changes the bound property value in the component too.
For using the ngModel directive in a two-way data binding, you must do these two things-
- Import the FormsModule
- Add it to the NgModule's imports list
import { FormsModule } from '@angular/forms';
..
..
@NgModule({
..
..
imports: [
BrowserModule,
FormsModule
],
..
..
})
export class AppModule { }
You could achieve the same result with separate bindings to the <input> element's value property and input event:
<input [value]="userName" (input)="userName=$event.target.value">
or like this-
<input [ngModel]="userName" (ngModelChange)="userName=$event">
Using [(ngModel)] simplifies the two-way data binding with a shorter syntax. Note that, this [(ngModel)] syntax can only set a data-bound property. If you need to do something more, you can write the expanded form as shown above. For example, the following changes the <input> value to uppercase:
<input [ngModel]="userName" (ngModelChange)="setUppercaseName($event)">
Angular two-way binding example
1. Here is an example with a single property userName in the component.
import {
Component
} from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
userName = "Rita";
constructor(){}
}
Template
<div>
<label for="username">User Name:</label>
<input [(ngModel)]="userName" id="username">
<p>{{ userName }}</p>
</div>
In the template as you can see target of two-way binding is ngModel directive and the expression is the property "userName" property of the component.
On running the example you get the output as-
Since property “userName” has an initial value so that value is displayed in the template.
Now if you change that value in the input element, that changed value would be reflected in the component too. Using String interpolation that value is fetched from the component and shown below the input element.
2. Two-way binding with fields of a model can be done in a similar way. Let’s say there is a Model class User with 2 fields name and age.
user.model.ts
export class User {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
user.component.ts
In the component, instance of the Model class User is created and initialized with values.
import { Component } from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
user: User;
constructor(){
// Initializing User instance
this.user = new User('Jack Ryan', 56);
}
}
user.component.html
<div class="container">
<div class="mb-3">
<label for="username" class="form-label">User Name</label>
<input class="form-control" [(ngModel)]="user.name" id="username">
<p>{{ user.name }}</p>
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input class="form-control" id="age" [(ngModel)]="user.age">
<p>{{ user.age }}</p>
</div>
</div>
That's all for this topic Angular Two-Way Data Binding With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-