Angular Two-Way Data Binding


Angular Two-Way Data Binding

When we made any change in view section and then we want to update Angular Component property immediately this process is called Angular Two-Way Data Binding.

In simple word we can say Angular Two-Way Data Binding is way to detect any changes.

We will use [(ngModel)] in HTML element to listen for an element change event in Angular Component.  To use NgModel we need to import FormsModule and add it to imports attribute of @NgModule in our module file.

<input [(ngModel)] ="name"/>

Two-Way Data Binding Example

  1. app.html
  2. app.component.ts

app.html

<div style="text-align:center">
     <input [(ngModel)] = "name">
</div>

app.component.ts

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

@Component({

  selector:'app-root',
  templateUrl:'./app.html'

})

export class AppComponent {
    public name: String = 'Sonali';
}

In above example you can see [(ngModel)] in app.html text box. So whenever you will change any value in above text box then it will automatically get reflect in AppComponent class this is nothing but Angular two way data binding.






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229