Angular8 Two way Data Binding

Two way Data Binding in Angular 8

We saw that any improvements in the template (view) were not reflected in the component TypeScript code in one-way data binding. Angular provides two-way binding of data to resolve this problem. The two-way binding has a feature for updating component-to-view data, and vice-versa.

Automatic synchronization of data between the Model and the View occurs in two-way databinding. In both components, change is reflected here. It will be reflected in the View if you make adjustments to the Model and when you make improvements to the View, it will be reflected in the Model.

This happens immediately and automatically, ensuring that both the HTML template and the TypeScript code are always updated.

Data binding is combined in two ways: property binding and event binding.

Syntax:

[(ngModel)] = "[property of your component]"

Open the app.module.ts file of your project, and use the following code:
import { BrowserModule } from '@angular/platform-browser';    
import { NgModule } from '@angular/core';    
import {FormsModule} from '@angular/forms';    
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 Phptpoint";    
}    

app.component.html file:

Two-way Binding

<input [(ngModel)]="UserName"/> 
{{fullName}}