title: NativeScript 2/ Angular 2 Data binding [(ngModel)] how do I update TextField programmatically.
body: <p>I would like to update the TextField text property programmatically using angular2 data binding. From <a href="https://docs.nativescript.org/angular/tutorial/ng-chapter-3.html#32-data-binding" rel="nofollow">here</a> it looks like I would set [(ngModel)]="email" in my layout then in my code add a property email. With the current set up, I am able to change the text property on load, but if I try and change the text property programmatically from a button click the changes to email are not reflected in the view's TextField text property. </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { User }              from '../../shared/user/user';
  import { LoginModel }        from '../../model/login/login-model';
  import { HttpService }       from '../../services/http/http-service';
  
  @Component({
      selector:'login',
      templateUrl:'pages/login/login.component.html',
      providers: [HttpService]
  })
  
  export class LoginComponent implements OnInit {
      email:string = "test@live.com";
      user: User;
      //model: LoginModel;
      constructor(private _httpService: Httpservice) {
          //this.model = new LoginModel();
          this.user = new User();
      } //default constructor
  
      ngOnInit() {}
  
      onButtonTap() {
          //alert("onButtonTap clicked ");
          //this._mpixService.register(this.model.user);
  
          this.email = "Changed@live.com";
          alert("onButtonTap clicked " + this.email);
      }
  }
  </code></pre>
  
  <p>My view</p>
  
  <pre><code>&lt;ActionBar title="Login Mpix Tap To Print"&gt;
    &lt;ActionItem text="Login" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"&gt;&lt;/ActionItem&gt;
  &lt;/ActionBar&gt;
  &lt;StackLayout&gt;
      &lt;TextField hint="Email Address" keyboardType="email"
          autocorrect="false" autocapitalization="none" [text]="email"&gt;&lt;/TextField&gt;
      &lt;TextField hint="Password" secure="true" keyboardType="password" 
          autocorrect="false" autocapitalization="none" [(ngModel)]="password"&gt;&lt;/TextField&gt;
  
      &lt;Button text="Sign In" (Tap)='onButtonTap()'&gt;&lt;/Button&gt;
      &lt;Button text="Sign up for Mpix" [nsRouterLink]="['/signup']"&gt;&lt;/Button&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>I have also tried variations of TextField view property</p>
  
  <pre><code>&lt;TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [text]="email" (emailChange)="email=$event"&gt;&lt;/TextField&gt;
  
  &lt;TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email" [text]=email&gt;&lt;/TextField&gt;
  
  &lt;TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email"&gt;{{email}}&lt;/TextField&gt;
  </code></pre>
  
  <p>The text field is set to test@live.com when the interface first loads. </p>