Nativescript-angular: Nested custom components are not rendered nor processed

[konradkubiec]

Did you verify this is a real problem by searching [Stack Overflow]

Yes, I did find some registered issues with nested components (like problems with styles propagations or events) but not directly on this topic.

Which platform(s) does your issue occur on?

Both: Android and iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.0
• Cross-platform modules: 2.4.2
• Runtime(s):

"tns-android": {
      "version": "2.4.1"
    },
    "tns-ios": {
      "version": "2.4.0"
    }

Please tell us how to recreate the issue in as much detail as possible.

Run code sample. You can see a list of empty items, Instead of expected:
'[0] data item 0'
'[1] data item 1'
'[2] data item 2'
The same problem exists even in extremely simple use cases (view only with one nested component).

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

import {Component, Input } from '@angular/core';
import {Label} from 'ui/label';

class DataItem {
    constructor(public id: number, public name: string) { }
}

// Nested component
@Component({
    selector: 'item-component',
    template: `
        <StackLayout>                 
            <Label [text]='"[" + data.id +"]" + data.name'></Label>
        </StackLayout>
    `
})
export class ItemComponent {
    @Input() data: DataItem;
    constructor() {}
}

// Main component
@Component({
    selector: 'my-app',
    styleUrls: ["app.css"],
    template: `
        <GridLayout rows="auto * auto">
            <ListView [items]="myItems" (itemTap)="onItemTap($event)" row="1" margin="10">
                <template let-item="item" let-i="index" let-odd="odd" let-even="even">
                    <item-component [data]="item"></item-component>
                </template>
            </ListView>
        </GridLayout>
    `
})
export class AppComponent {
    public myItems: Array<DataItem>;
    private counter: number;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 3; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }

    public onItemTap(args) {
        console.log("--> ItemTapped: " + args.index);
    }
}

[eleddie]

Can you post your NgModule please? Maybe you are not declaring the Components there

[konradkubiec]

Omg, I forgot about adding component to @NgModule declarations :/
Thanks for the help!

PS. Is there any way to workaround adding each component to declarations? With complex apps, it is easy to forget one of the components.

[eleddie]

Haha great!

As far as I know there's no way to do that yet. I have read that they are working on a CLI to create components and stuff and I guess that it is going to add components automatically to the module. But I don't know how far are they with that.

Great to hear you fixed the problem!

[nghialt]

I still face the same issue when add a custom component inside GridLayout. I have to add containers wrap my components to display properly