1.

What is two way data binding in Angular?

Answer»

Data sharing between a component class and its template is referred to as two-way data binding. If you alter data in one area, it will immediately reflate at the other end. This happens instantly and automatically, ensuring that the HTML template and TypeScript code are always up to date. Property binding and event binding are coupled in two-way data binding.

Example: 

app.component.ts

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

@Component({
selector: "app",
templateUrl: "./app.component.html",
})
export class AppComponent {
data = "This is an example component of two way data binding.";
}

app.component.html

<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 {}


Discussion

No Comment Found

Related InterviewSolutions