Tuesday, April 21, 2020

Angular Two-Way Data Binding With Examples

Angular one way data binding provides unidirectional binding either:

From component (Type Script code) to template (HTML view) in the form of String interpolation, property binding.

OR

From template (HTML view) to component (Type Script code) in the form of event binding.

In Angular two way binding both of these one way bindings are combined to create a two-way flow of data between a component class and its template. So, two-way binding does both of these-

  1. If a property in the component is changed that change flows to the view.
  2. Same way change in view is reflected in the bound property in the component.

You can see that the former is property binding where as the latter is event binding and the combination of both results in two-way binding in Angular.

Angular Two-Way Data Binding

Syntax of Angular two-way binding

Syntax for two-way data binding in Angualar is [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, ().

This syntax for two-way binding is also known as banana in a box.

[( )] = BANANA IN A BOX

It is just a visual way to remember that the parentheses go inside the brackets.

How to use two-way binding in Angular

In Angular ngModel directive is used for two-way bindings. It simplifies creating two-way data bindings on form elements like input element.

[(ngModel)] = "[PROPERTY_IN_COMPONENT]"  

For example: <input type="text" [(ngModel)]="userName" />

If userName property in the component has an initial value that is shown as the value of the input. Also any change in the value done by the user in the view changes the bound property value in the component too.

For using the ngModel directive in a two-way data binding, you must do these two things-

  • Import the FormsModule
  • Add it to the NgModule's imports list
import { FormsModule } from '@angular/forms';
..
..
@NgModule({
  ..
  ..

  imports: [
    BrowserModule,
    FormsModule
  ],
  ..
  ..
})
export class AppModule { }

You could achieve the same result with separate bindings to the <input> element's value property and input event:

<input [value]="userName" (input)="userName=$event.target.value">

or like this-

<input [ngModel]="userName" (ngModelChange)="userName=$event">

Using [(ngModel)] simplifies the two-way data binding with a shorter syntax. Note that, this [(ngModel)] syntax can only set a data-bound property. If you need to do something more, you can write the expanded form as shown above. For example, the following changes the <input> value to uppercase:

<input [ngModel]="userName" (ngModelChange)="setUppercaseName($event)">

Angular two-way binding example

1. Here is an example with a single property userName in the component.

import { 
    Component
 } from '@angular/core';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
    userName = "Rita";
    constructor(){
  
    }  
}

Template

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">User Name:</label>
                <input class="form-control" [(ngModel)]="userName">
                <p>{{ userName }}</p>
            </div>
        </div>
    </div>
</div>

In the template as you can see target of two-way binding is ngModel directive and the expression is the property “userName” property of the component.

On running the example you get the output as-

angular twoway data binding example

Since property “userName” has an initial value so that value is displayed in the template.

Now if you change that value in the input element, that changed value would be reflected in the component too. Using String interpolation that value is fetched from the component and shown below the input element.

2. Two-way binding with fields of a model can be done in a similar way. Let’s say there is a Model class User with 2 fields name and age.

user.model.ts

export class User {
    name : string;
    age : number;
    constructor(name: string, age : number) {
        this.name = name;
        this.age = age;
    }
}

user.component.ts

In the component instance of the Model class User is crated and initialized with values.

import { 
    Component
 } from '@angular/core';
import { User } from './user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
    user: User;
    constructor(){
      // Initializing User instance
      this.user = new User('Jack Ryan', 56);

    }
}

user.component.html

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">User Name:</label>
                <input class="form-control" [(ngModel)]="user.name" id="username">
                <p>{{ user.name }}</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">Age:</label>
                <input class="form-control" id="age" [(ngModel)]="user.age">
                <p>{{ user.age }}</p>
            </div>
        </div>
    </div>
</div>

That's all for this topic Angular Two-Way Data Binding With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. Angular Custom Two-Way Data Binding
  2. Angular Attribute Binding With Examples
  3. Angular ngIf Directive With Examples
  4. Angular ngClass Directive With Examples
  5. Angular @Input and @Output Example

You may also like-

  1. Angular First App - Hello world Example
  2. How to Add Bootstrap to Angular Application
  3. Injector Hierarchy and Service Instances in Angular
  4. How to Setup Angular
  5. Inter-thread Communication Using wait(), notify() And notifyAll() in Java
  6. Serialization and Deserialization in Java
  7. Reading Delimited File in Java Using Scanner
  8. Bubble Sort Program in Python