Nativescript angularjs 2.0 data binding

Question

Using nativescript 2/angular 2, having problems with data binding. I'm familiar with angularJS 1.x, but the docs I've read on this, this should be working. Tried different variations of ngModel, but not working. The value of record.name is "undefined".

The record class simply has an id and name field defined. My other question is how do you trigger a change event to the component? If a user is starting to type in a text input, how can I call a function in the component as they are typing?

Below is my "html":

<StackLayout>   
    <Textfield hint="Search for a Record" [(ngModel)]="record.name" (returnPress)="searchRecord()"></Textfield>
    <Label text="{{ record.name }}"></Label>
    <Button text="Search" class="btn" (tap)="searchRecord()"></Button>

    <Button text="Take Photo" class="btn" (tap)="takePhoto()"></Button>
</StackLayout>

Add record component:

import {Component} from "@angular/core";

import cameraModule = require("camera");
import imageModule = require("ui/image");

import {Record} from "../../shared/record/record";
import {RecordService} from "../../shared/record/record-service";

@Component({
  selector: "add-record",
  templateUrl: "pages/add-record/add-record.html",
  styleUrls: ["pages/add-record/add-record-common.css"],
  providers: [ RecordService ]
})
export class AddRecordPage {    
    record: Record;

    constructor(private _recordService: RecordService) {
        this.record = new Record();
    }

    searchRecord() {
        console.log(this.record.name + '!');


        this._recordService.add(this.record)
            .subscribe(
                () => {
                    alert('a');
                },
                () => {
                    alert('b');
                }
            );
    }

    takePhoto() {
        cameraModule.takePicture().then(picture => {
            console.log("Result is an image source instance");
            var image = new imageModule.Image();
            image.imageSource = picture;

        });
    }
}

Thanks!

Answer 1

Go to the main module of your app, which is loaded by platformNativeScriptDynamic().bootstrapModule() .

[ To find out your main module, go to you main.ts (or main.js) file (which is the entry point of the app). Find the line like below:

platformNativeScriptDynamic().bootstrapModule(AppModule);

Here AppModule is the first module to be loaded.

See the import statements to find in which file the AppModule is defined. It may look like below

import { AppComponent } from "./app.component";

]

In the main module's file (app.component.ts) add two things,

1) At the top add import for NativeScriptFormsModule

import { NativeScriptFormsModule } from "nativescript-angular/forms";

2) In the main module's @NgModule decorator add NativeScriptFormsModule to the imports: array to add this as one of the imported modules.

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

This ngModel support didn't come before 27th Jan. As can be found in this link

Or see this exercise from nativescript.org tutorials

Exercise: Two-way data binding with Angular 2

In app/app.component.ts, find the first , and replace it with the below, which introduces a new [(ngModel)] attribute:

Copy Next, open app/app.module.ts and replaces its contents with the code below, which adds a new NativeScriptFormsModule to the NgModule’s list of imports.

Copy import { NgModule } from "@angular/core"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { NativeScriptModule } from "nativescript-angular/platform";

import { AppComponent } from "./app.component";

@NgModule({ imports: [ NativeScriptModule, NativeScriptFormsModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}

Answer 2

I have noticed some problems in the syntax for your binding in your "html" file which is not the correct one used for NativeScript + Angular-2 Check my answer on similar topic here

For example yours :

<Label text="{{ record.name }}"></Label>

Should become :

<Label [text]="record.name"></Label>

Also you can check the tutorial about data-binding in NativeScript + Angular-2