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!

Can you please add the exact error message? Do you actually set `this.record = new Record();` in the constructor or is this only simplified code for the SO question? — Günter Zöchbauer, Jun 06 '16 at 04:14
I do set this.record in the constructor, here is the value of the record class: export class Record { id: number; name: string; photo: string; } I don't get an error however. Just that as I'm typing in that text input, which is tied to an ngModel, the label does not spit out the value and inside the component the value is not binded. — charliepage88, Jun 06 '16 at 16:57

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

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

edited May 23 '17 at 11:54

Community

1
1

answered Jun 06 '16 at 10:34

Nick Iliev

9,610
3
35
89

1

Thanks for that! As for data-binding, that's the tutorial I was using and with the code above, can't get working. Using [(ngModel)] or (ngModel), is just returning undefined in the component. Any ideas? – charliepage88 Jun 06 '16 at 15:37
The component needs to be compatible with `ngModel`. If it is not you should get an error message. Otherwise, sorry I don't know Nativescript. – Günter Zöchbauer Jun 06 '16 at 17:17
I have a similar problem.. @charliepage – Kartiikeya Sep 22 '16 at 07:45
is there any solution for this..the tutorial is so confusing..no simple implemenatitions defined...i also tried the tutorial way of binding, that is using some class object ... [(ngModel)]="record.name"..but when i tried to access it on a button click, its giving undefined...is there any proper way to get the text value...why there is not much of samples or simple implementations....struggling for days... – dreamdeveloper Dec 01 '16 at 07:30

score 1 · Answer 2 · answered Dec 06 '16 at 17:55

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 {}

Nativescript angularjs 2.0 data binding

2 Answers2