Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Two-way binding with NgModel in Angular2

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 259
    Comment on it

    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 :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: