title: NativeScript Angular 6 two way binding doesn't work on TextField
body: <p><strong>Introduction</strong></p>
  
  <p>NativeScript version 4.2.4 </p>
  
  <p>Angular version 6.0</p>
  
  <p>This is my first app on nativescript. I'm familiar with angular, so I need to choose nativescript over ionic for building native hybrid apps.</p>
  
  <p><strong>Scenario</strong></p>
  
  <p>I have created this app using sidekick. Now, first I created two TextField and bind their text with some string property. Here I tell you peoples that this template is using lazy loading by default and all components in this app have separate their module.ts files.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>After binding when I run app (live sync) on my smart phone. Two way data binding doesn't work. Here I'm sharing my code.</p>
  
  <blockquote>
    <p>app.module.ts</p>
  </blockquote>
  
  <pre><code>import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
  import { NativeScriptModule } from "nativescript-angular/nativescript.module";
  import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
  import { NativeScriptFormsModule } from "nativescript-angular/forms";
  
  import { AppRoutingModule } from "./app-routing.module";
  import { AppComponent } from "./app.component";
  
  @NgModule({
      bootstrap: [
          AppComponent
      ],
      imports: [
          AppRoutingModule,
          NativeScriptModule,
          NativeScriptFormsModule,
          NativeScriptUISideDrawerModule
      ],
      declarations: [
          AppComponent
      ],
      schemas: [
          NO_ERRORS_SCHEMA
      ]
  })
  export class AppModule { }
  </code></pre>
  
  <blockquote>
    <p>home.module.ts</p>
  </blockquote>
  
  <pre><code>import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
  import { NativeScriptCommonModule } from "nativescript-angular/common";
  import { NativeScriptFormsModule } from "nativescript-angular/forms";
  
  import { HomeRoutingModule } from "./home-routing.module";
  import { HomeComponent } from "./home.component";
  
  @NgModule({
      imports: [
          NativeScriptCommonModule,
          NativeScriptFormsModule,
          HomeRoutingModule
      ],
      declarations: [
          HomeComponent
      ],
      schemas: [
          NO_ERRORS_SCHEMA
      ]
  })
  export class HomeModule { }
  </code></pre>
  
  <blockquote>
    <p>home.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { RadSideDrawer } from "nativescript-ui-sidedrawer";
  import * as app from "tns-core-modules/application";
  
  @Component({
      selector: "Home",
      moduleId: module.id,
      templateUrl: "./home.component.html"
  })
  export class HomeComponent implements OnInit {
      TestingText: string;
      constructor() {
          this.TestingText = 'anything';
          // Use the component constructor to inject providers.
      }
  
      ngOnInit(): void {
  
          // Init your component properties here.
      }
  
      onDrawerButtonTap(): void {
          const sideDrawer = &lt;RadSideDrawer&gt;app.getRootView();
          sideDrawer.showDrawer();
      }
  }
  </code></pre>
  
  <blockquote>
    <p>home.component.html</p>
  </blockquote>
  
  <pre><code>&lt;ActionBar class="action-bar"&gt;
      &lt;!-- 
      Use the NavigationButton as a side-drawer button in Android
      because ActionItems are shown on the right side of the ActionBar
      --&gt;
      &lt;NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"&gt;&lt;/NavigationButton&gt;
      &lt;!-- 
      Use the ActionItem for IOS with position set to left. Using the
      NavigationButton as a side-drawer button in iOS is not possible,
      because its function is to always navigate back in the application.
      --&gt;
      &lt;ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left"&gt;
      &lt;/ActionItem&gt;
      &lt;Label class="action-bar-title" text="Home"&gt;&lt;/Label&gt;
  &lt;/ActionBar&gt;
  
  &lt;FlexboxLayout class="page"&gt;
      &lt;StackLayout class="form"&gt;
          &lt;StackLayout class="input-field"&gt;
              &lt;TextField hint="Type Something" [(ngModel)]="TestingText" secure="false" class="input input-border"&gt;&lt;/TextField&gt;
              &lt;StackLayout class="hr-light"&gt;&lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout class="input-field"&gt;
              &lt;TextField hint="Binding" Text="{{TestingText}}" secure="false" class="input input-border"&gt;&lt;/TextField&gt;
              &lt;StackLayout class="hr-light"&gt;&lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/StackLayout&gt;
  &lt;/FlexboxLayout&gt;
  </code></pre>
  
  <p>Furthermore I've also found below related question </p>
  
  <p><a href="https://stackoverflow.com/questions/43502810/nativescript-ng2-two-way-binding-doesnt-work-on-textfield">Binding doesnt work on textfield</a></p>
  
  <p>but this doesn't work in my case. I think my question is same but different in technology. This question is based on angular 2 but in my case I'm using angular 6.</p>
  
  <p><strong>Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/3jCG1.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3jCG1.gif" alt="enter image description here"></a></p>