ListView ng-template ignored

[sebawita]

When I try use a ListView with the data coming from an array, the ListView 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.

This happens with both iOS and Android.

To reproduce:

Open src/app/home/components/home/home.component.ts add the following code: items: string[] = ['a', 'b', 'c'];

Open src/app/home/components/home/home.component.tns.html and replace it with

<GridLayout rows="auto,auto,*">
    <Label class="h1 title"
        [text]="'home.title' | translate"></Label>
    <Label class="p description" textWrap="true" row="1"
        [text]="'home.description' | translate"></Label>

    <ListView row="3" [items]="items" class="list-group">
        <ng-template let-item="item">
          <StackLayout>
              <Label text="Template text to display!" ></Label>
          </StackLayout>
        </ng-template>
    </ListView>
</GridLayout>

Result

The expected behaviour:

a ListView with 3 labels with the text:

Template text to display!
Template text to display!
Template text to display!

Actual behaviour:

a ListView with 3 labels with the text:

a
b
c

[sebawita]

Additionally, I've tested the same code in a brand new {N} project (outside of the Seed project) and the ListView behaves, as expected. So there must be something in the seed project that makes it behave like this.

[fourctv]

I had the same problem in my app, where the ng-template was being ignored. That is what you are seeing.

I solved it by adding the following nativescript modules to my component's module:

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';

Actually to a tns version of my component's module.

So, give it a try. Create a home.module.tns.ts, that add those 2 modules to it's import list. Something like:

import { NgModule, Optional, SkipSelf, NO_ERRORS_SCHEMA } from '@angular/core';
// app
import { HomeComponent } from './components/home/home.component';
import { SHARED_MODULES } from './home.common';

// tns
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';

@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        ...SHARED_MODULES
    ],
    declarations: [HomeComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule {

    constructor( @Optional() @SkipSelf() parentModule: HomeModule) {
        if (parentModule) {
            throw new Error('HomeModule already loaded; Import in root module only.');
        }
    }
}

See if that fixes it.

[sebawita]

@fourctv thank you for the help. It was enough to add NativeScriptModule. For some reason I thought that the modules from app.module.tns.ts would be available globally (like a set of defaults), but it looks like imports go away as soon as you load another NgModule.