Two way binding in angular

By using two-way binding you can share data between a component class and its template. By using two-way binding, data property can be shown into UI and that data changes when the user makes changes to that property’s value.
The two-way binding syntax is [()]. This syntax is also called as ‘BANANA IN A BOX‘. Two-way binding syntax combines syntax of property binding i.e [] and parentheses of event binding i.e ().

You can learn how to use two-way binding by using two steps:

Step 1: Create two variables into a component

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  fullname = '';
  email = '';
}

Here, fullname and email variables are created.

Step 2: Use two way binding into template ie. HTML

<h1><u>Two way binding:</u></h1>
<h2>
  Enter your Name:
  <input type="text" [(ngModel)]="fullname">
</h2>

<h2>
  Enter your Email:
  <input type="email" [(ngModel)]="email">
</h2>
<hr>
<h2><u>User Info:</u></h2>
<h3>Name: {{fullname}}</h3>
<h3>Email: {{email}}</h3>

Here, two-way binding is used. In [()] used ngModel. By using NgModel directive you can display a data property and update that property when the user makes changes.
So, when the user enters fullname and email, that information gets shown below. For showing information entered by the user, you can use Interpolation {{}} like above.

Output:

Conclusion:

You learned how to use two-way binding in angular. If you have problems while implementing code, you can tell me through the comment section.
Learn other types of data binding from the below articles:

Interpolation in angular
Property binding in angular
Event binding in angular

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments