One of the most important and powerful tools for generating interaction between the DOM and the component is data binding.

Data Binding in Angular: a system that automatically updates the view (HTML template) as the component's data changes. 

Web sites with interactive elements like forms, calculators, tutorials, and games often use Angular data binding. 

Data binding comes in four varieties: Interpolation, Property Binding, Event Binding, and Two-Way Binding.

 

• Property binding links a DOM element's property to a field that is a defined property in our TypeScript component code. Actually, Angular internally converts string interpolation to property binding. 
• Event Binding:  react to mouse movement and button presses as well as DOM events. A DOM event—such as a click, change, or keyup—triggers the component's defined method.
• String Interpolation is a one way data binding technique whereby TypeScript code exports data to an HTML template (view). The data from the component is shown to the view using the template expression contained in double curly braces. String interpolation adds the value of a component property. 
• Two-way data binding is data sharing between a component class and its template. Data changed in one section will instantly reflate at the other end. This guarantees that the HTML template and TypeScript code are always current as it happens automatically and immediately. Two-way data binding couples property binding with event binding. 

 

import { Component } from "@angular/core";
@Component({
 selector: "app",
 templateUrl: "./app.component.html",
})
export class AppComponent {
 data = "two way data binding.";
}

<input [(ngModel)]="data"  type="text">
 <br> <br>
 <h2> You entered the data:  {{data}}</h2>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

@NgModule({
 imports: [BrowserModule, FormsModule],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
})
export class AppModule {}