Ionic two way data binding in details

Ionic two way data binding helps users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally. Ionic Two-way data binding can be achieved using a ngModel directive in Angular. The 2-way data binding using (ngModel), which is basically the combination of both the square brackets of property binding and parentheses of the event binding.

In this article, we will learn how to use Ionic Angular two way data binding with an example.


When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view are updated at all times.

<-- template -->
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

// in component
this.username = 'test'

The we can change the input username from both view and model.  We will create an example where we can change user name and password from both view and component by click of one of two button.

Ionic two way data binding
2 way data binding ionic

Step 1: Create ionic project ionic start twoWay blank –type=angular
Step 2: We will create an object login with two properties username and object. We’ll use ngModel to archives 2-way data binding in our ionic example.

Step 3: Add the following code in home.page.html file

<ion-header>
  <ion-toolbar>
    <ion-title>
      2 Way data Binding - Ionic 5
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <form novalidate>
      <ion-list>
        <ion-item>
          <ion-label position="stacked" color="primary">Username</ion-label>
          <ion-input [(ngModel)]="login.username" name="username" type="text" required>
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked" color="primary">Password</ion-label>
          <ion-input [(ngModel)]="login.password" name="password" type="password" required>
          </ion-input>
        </ion-item>
      </ion-list>
      <ion-row>
        <ion-col>
          <ion-button (click)="onLogin()" type="submit" expand="block">Login</ion-button>
        </ion-col>
        <ion-col>
          <ion-button (click)="setLoginData()" expand="block">Set data from typescript</ion-button>
        </ion-col>
      </ion-row>
    </form>
  </div>
</ion-content>

Step 4: Add the following code in home.page.ts file

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  login: any = { username: '', password: '' };

  constructor() {}

  onLogin() {
    console.log('user name:', this.login.username );
    console.log('user password', this.login.password );
  }

  setLoginData() {
    this.login.username = 'edupala.com';
    this.login.password = '12345';
  }
}


Check more information on angular two-way data binding on official angular documentation.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top