RadListView ng-template ignored

Viewed 389

I'm trying to create my first mobile application using nativescript-angular framework. I'm stuck on the RadListView component. When I try using a RadListView with the data coming from an array, the RadListView creates a label for each item and binds to it. When I provide my own ng-template, nothing changes and the contents of the array are still displayed as before. I tried with a new project but the problem persists.

Code

This is the code I tried on a blank new project:

src\app\home\home.component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<GridLayout tkExampleTitle tkToggleNavButton class="page">
    <RadListView [items]="dataItems" background="red">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" background="blue">
                <Label [text]="item" background="green"></Label>
                <Label text="Template text to display!" ></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

src\app\home\home.component.ts

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

import { ObservableArray } from "tns-core-modules/data/observable-array";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    private _dataItems: ObservableArray<string>;

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
        this._dataItems = new ObservableArray(["Test", "Hello", "World"]);
    }

    get dataItems(): ObservableArray<string> {
        return this._dataItems;
    }
}

src\app\app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUIListViewModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

I tried to verify if the problem appears also with a ListView component, but it works perfectly. I found a similar problem at this link: ListView ng-template ignored

Results

RadListView Result

RadListView Result

ListView Result

ListView Result

Did I forgot something? What must I change?

0 Answers
Related