angular 4 data binding | example

Angular 4 Two Way Data Binding

• Two-way data binding uses the ngModel directive, which is included in FormsModule.
• Bidirectional data flow(1. From form control to component property. 2 From Component property to Form Control)
• Two-way data binding is represented by [(ngModel)]
• It is binding on event and property together.

Example : 

Step 1 : Create new Component.

ng g c bindingtwoway –flat –is –it

Step2: Write Following code in bindingtwoway.component.ts

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

@Component({
  selector: 'app-bindingtwoway',
  template: `
    <p>
      bindingtwoway Works!
    </p>
    <input [(ngModel)]="title"/>
    <input [(ngModel)]="title"/>
    <p>{{ title }}</p>
  `,
  styles: []
})
export class BindingtwowayComponent implements OnInit {

  title = '';
  constructor() { }

  ngOnInit() {
  }

}

Step 3: Add selector of newly created component into app.component.html

<app-bindingtwoway></app-bindingtwoway>

Step 4: Run using ng serve –open

Output: