Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • Angular Get Started
  • Install Angular
  • Create Angular App
  • Angular Component
  • HTML Template
  • Event Binding
  • Two-way Data Binding
  • Interpolation
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Two-way Data Binding in Angular

Here you will learn how to do two-way data binding in Angular.

Two-way data binding refers to sharing data between a component class and its template. If you change data in one place, it will automatically reflate at the other end. For example, if you change the value of the input box, then it will also update the value of the attached property in a component class.

Two-way data binding performs the following actions:

  1. Sets a property of a component class
  2. Listens for a DOM element change event

Angular v2+ supports two-way data binding using ngModel directive and also by having getter and setter methods.

ngModel Directive

The ngModel directive with [()] syntax (also known as banana box syntax) syncs values from the UI to a property and vice-versa. So, whenever the user changes the value on UI, the corresponding property value will get automatically updated.

[()] = [] + () where [] binds attribute, and () binds an event.

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

@Component({
  selector: 'app-greet',
  template: `
  User Name: <input type="text" [(ngModel)]="userName"  ><br/>
    {{userName}}
    `
})
export class GreetComponent implements OnInit {

  constructor() { }

  userName: string = "jbond";

  ngOnInit(): void {
  }

}

The [(ngModel)] syntax is the recommended way of two-way data binding.

The ngModel directive with [] syntax is used for one-way data binding. [ngModel] binds a value to a property to UI control.

Getter and Setter Methods

For two-way data binding, declare a private property and access its value using get and set methods in the component class. Then, assign that property to [(ngModel)].

For example, declare a private property with a get and set method, as shown below.

private _userName: string = "bill gates";

  get userName(): string {
    return this._userName;
  }

  set userName(val: string) {
    //do some extra work here
    this._userName = val;
  }

Now, assign userName to [(ngModel)] in the template.

<input type="text" [(ngModel)]="userName" >

The following is a full example of two-way data binding using get and set methods.

Two-way Data Binding
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-greet',
  template: `
  User Name: <input type="text" [(ngModel)]="userName" ><br/>
    {{userName}}`
})
export class GreetComponent implements OnInit {

  constructor() { }

  private _userName: string = "bill gates";

  get userName(): string {
    return this._userName;
  }
  set userName(val: string) {
    //do some extra work here
    this._userName = val;
  }
  ngOnInit(): void {
  }
}
TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.