Two way Data Binding in Angular 8 | Angular 8 Two way Data Binding

by Online Tutorials Library July 22, 2022

Two way Data Binding in Angular 8

We have seen that in one-way data binding any change in the template (view) were not be reflected in the component TypeScript code. To resolve this problem, Angular provides two-way data binding. The two-way binding has a feature to update data from component to view and vice-versa.

In two-way databinding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model.

This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.

In two way data binding, property binding and event binding are combined together.

Syntax:

Note: For two way data binding, we have to enable the ngModel directive. It depends upon FormsModule in angular/forms package, so we have to add FormsModule in imports[] array in the AppModule.

Let’s take an example to understand it better.

Open your 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/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 TutorAspire “;    }    

app.component.html file:

<h2>Two-way Binding Example</h2>
<p>       <input> </p>
<p> {{fullName}} </p>
<p>  </p>

Now, start your server and open local host browser to see the result.

Output:

You can check it by changing textbox value and it will be updated in component as well.

For example:

Next TopicAngular 8 Forms

add angular 8 form validation advantages of angular 8 angular angular 7 angular 7 vs angular 8 angular 8 angular 8 components angular 8 delete the data angular 8 environment setup angular 8 files explanation angular 8 first app angular 8 history angular 8 installation angular 8 introduction angular 8 project angular 8 tutorial angular 8 versions angular cli workflow angular server bootstrap form directives features of angular 8 how to create angular navigation how to install angular 8 how to upgrade angular older versions to angular 8 install angular routing progress indicator install bootstrap 4 css framework mongodb server ngclassdirective ngfor directive ngif directive ngstyle directive node.js server

Two way Data Binding in Angular 8 | Angular 8 Two way Data Binding

Two way Data Binding in Angular 8

Syntax:

Note: For two way data binding, we have to enable the ngModel directive. It depends upon FormsModule in angular/forms package, so we have to add FormsModule in imports[] array in the AppModule.

Bootstrap 5 image

Backbone.js new.collection()

You may also like