[Angular2][NativeScript] template tag doesnt work in ListView

Question

Hi i have a problem with ListView in NativeScript using Angular2.

in my directive i have Array of Objects

export class Room {
constructor(
    public name: string,
    public tag: string
    ){ }
}

import { Page } from "ui/page";
import { Component, OnInit, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

@Component({
    moduleId: module.id,
    selector: 'rooms-list',
    templateUrl: "./template.html",
    providers: [RoomService],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class RoomsListComponent implements OnInit {

    public items: Array<Room> = [];

    listLoaded = false;

    load() {
        for (let i = 0; i < 200; i++) {
                this.items.push(
                    new Room("room " + i, "tag " + i)
                );

            }
    }
    ngOnInit(): void {
        this.load();
    }
    onTap(name){
        console.log('taped: '+name);
    }
}

in my template i use ListView

<ListView [items]="items" id="roomsList">
    <template let-item="item">
        <StackLayout>
            <Label [text]='"[" + item.tag +"] " + item.name'></Label> 
        </StackLayout>
    </template>
</ListView>

but it looks like template tag doesnt exist, list contain only [object Object] elements.

Your code looks fine? What version of nativescript do you use? — GUISSOUMA Issam
– GUISSOUMA Issam, Commented Apr 11, 2017 at 7:33
Yes what version are you using, if you are using the RC (meaning Angular 4) the <template> has been changed to <ng-template>, similar question here: stackoverflow.com/a/43074761/3801632 — Vladimir Amiorkov
– Vladimir Amiorkov, Commented Apr 11, 2017 at 8:44
@VladimirAmiorkov with ng-template its still doesnt work. Im using nativescript 2.5 — Kamil Borecki
– Kamil Borecki, Commented Apr 11, 2017 at 9:56

Community · Accepted Answer · 2017-05-23 12:17:37Z

0

When using the moduleId: module.id in a @Component you need to give only the name of the templateUrl without any directories. Using the moduleId makes it so that any Url is looked in the current directory so you no longer need to specific the absolute path. Simply do the following:

@Component({
    moduleId: module.id,
    selector: 'rooms-list',
    templateUrl: "template.html",
    providers: [ RoomService ],
    changeDetection: ChangeDetectionStrategy.OnPush
})

More information can be found in this thread, you can also take a look at the official NAtiveScript ng examples here.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 11, 2017 at 10:35

Vladimir Amiorkov

2,9514 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vladimir Amiorkov Over a year ago

Can you try a simpler binding expression like [text]="item.tag" just to make sure that the items of the ListView are actually populated. Also can you edit your post to include the source of the Room object, maybe there is something there.

Kamil Borecki Over a year ago

i fixed it by importing NativeScriptModule from nativescript-angular/nativescript.module in my ngModule. before that i import this in component

leoncc · Accepted Answer · 2018-03-10 11:44:48Z

0

The below works in NativeScript/Angular 5, should also in Angular 2 I think. Change:

<StackLayout>

to:

<StackLayout (tap)="onTap(item)">

and:

onTap(name){
    console.log('taped: '+name);
}

to:

onTap(item){
    console.dir(item); // So item is a Room object
}

Angular 5 would need ng-template instead of template as well.

answered Mar 10, 2018 at 11:44

leoncc

2333 silver badges6 bronze badges

Collectives™ on Stack Overflow

[Angular2][NativeScript] template tag doesnt work in ListView

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related