Hello Readers,

In Angular2 we can do the Two-way binding and user can see the application data values. To show the data we uses data binding. In this post we will see how to implement Two-way binding in Angular2 application.

Two-way binding with NgModel :

Syntax for Two-way binding:  Its syntax makes it easy to implement.  We will use ngModel enclosed with square brackets then parentheses. For Example :

[(ngModel)]

Here is the full example of use of ngModel :

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding class="home">
    <myapp>{{Name}}</myapp>
    <ion-input [(ngModel)]="username" type="text"></ion-input>
    <button (click)="getUserName(username)">Search</button>
</ion-content>

home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

	@Component({
		selector:'myapp',
		templateUrl: 'build/pages/home/home.html'
	})
	export class HomePage {
		Name;
		getUserName(val)
		{
			this.Name = val;
		}		
		constructor(private navController: NavController) {
			
		}

	}

Hope this will help you :)