angular4 two way binding | example - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Two way data Binding in Angular 4


angular 4 two way binding

Two way data binding angularjs

Types of Data Binding in Angular 4

Three Types :

1.No Binding

Example : <input  name=”fname”  ngModel>

  1. One-Way

Example: <input  name=”fname“   [ngModel]=”fname”>

  1. Two-Way

Note: formmodule must be included in app.module.ts

import { FormsModule } from ‘@angular/forms’;

 Example : <input  name=”fname”  [ngModel]=”fname“  (ngModelChange)=”fname=$event”>

<input  name=”fname”  [(ngModel)]=”fname”>

Example Source Code  :

Step 1: First Create new component two-way-binding.

cd src/app

            ng g c two-way-binding –flat -is -it

Step 2: Write following code into the newly generated component.


Step 3: Update( Pass references of the newly created component into app.component.ts and app.module.ts )               app.component.ts


Execute :

ng serve –open



angular 4 data binding

angular 4 two way data binding example output

Select your currency