Two-way Data Binding in Angular 8

Two-way Data Binding in Angular 8

Two-way data binding is a synchronization between the model and the view. We can use the ngModel directive in two-way data binding. Custom two-way data binding is useful in form controls.

We have analyzed that in one-way data binding, changes in the template were not be reflected in the component Typescript code. To overcome this problem, Angular provides two-way data binding. The two-way Data binding has a feature to update data from component to the view and view to the component.

In the two-way data binding, property binding, and event binding, both are combined.

In two-way data binding, changes are reflected in both components. When we make changes in the model, it will be reflected in the view, and when we make changes in view, it will be reflected in the model.

Syntax:

[(ngModel)]= ”[property of our component]”

Example:

Open project’s app.module.ts file and use the following code:

import {BrowserModule} from ‘@angular/platform-browser’;
import {NgModule } from ‘@angular/core’;
import { FormsModule} from ‘@angular/core’;
import{ AppComponent } from ‘./app.component’; 
@NgModule ({
declarations: [
AppComponent
], 
imports:[
BrowserModule,
FormsModule
], 
providers:[ ]
bootstrap:[AppComponent]
})
export class AppModule { } 

app.component.ts file:

import {Component } from “@angular/core”;
@Component({
selector : “app-root”;
templateUrl:”./app.component.html”,
styleUrls: [“./app.component.css”] 
})
export class AppComponent {
fullname: string=”Hello Javatpoint”;
} 

app.component.html file:

Two-way Binding Example
  
 

   
 {{fullName}} 
 

Then start the server and open the localhost browser to the result.

Output:

We can check it by changing the textbox value, and it changed automatically in the component.

For Example: