Nativescript-angular: Repeater templates not working

[burkeholland]

When using a Repeater, the template elements are not displayed. Instead, [Object object] is displayed.

Environment

NativeScript 1.7
nativescript-angular 0.0.38
tis-core-modules: 2.0.0-angular-0

Steps To Reproduce

Add a repeater with a template bound to a collection. The template is not rendered. Switch the template to a ListView and the template is now rendered.

<Repeater [items]="todos">
    <template #item="item">
        <StackLayout>
            <GridLayout columns="30, *, auto" rows="auto" class="todo">
                <TextField [text]="item.title" col="1"></TextField>
           </GridLayout>
        </StackLayout>
    </template>        
</Repeater>

[vakrilov]

Hey @burkeholland.
The repeater is kind of obsolete in A{N}gular2 app because of the ngFor directive. They are doing basically the same but the ngFor is definitely the angular way.

[burkeholland]

Ah! Thank you! It's definitely a mind shift to go from regular {N} to A{N}.

[harlankoehn]

Is ngFor implemented or compatible with NativeScript? Is the ListView the only (or best) option right now when it comes to repeating elements?

I had some reasons why I thought the listview wouldn't work for my scenario but maybe I'll have to test further to see if it's true our not.

[matt4446]

@harlankoehn Both the Listview and *ngFor work well. From experience, I would move from ngfor to a listview if your repeated group is complex or has more than 100 items.
I have one exception that I might switch back for. Each of my rows has an inner collection (variable lengths on each row basically), which causes a little trouble on scrolling where the listview reuses the items (and so the scrollview changes). Usual problems for a listview really.

Anyway. Try both and see which better suits you.

[alexziskind1]

The repeater was handy for defining an itemsLayout property - something that seems to be missing with the *ngFor. Maybe I'm just having a dense moment here, but I can't as easily have a horizontal scrollable collection view that goes beyond the edge of the screen. Has this been done?

[alexziskind1]

I should have been just a little more patient. For those interested that find this thread, here is a vertical scrollview repeating (with *ngFor) multiple horizontal scrollviews repeating custom objects.
The key is the set orientation="horizontal" on the scrollview AND the stacklayout inside of it.

<StackLayout>
    <ScrollView>
        <StackLayout>
            <StackLayout *ngFor="let row of allrows">
                <Label  text="Row title"></Label>
                    <ScrollView orientation="horizontal">
                        <StackLayout orientation="horizontal">
                            <Label *ngFor="let item of row" [text]="item.title"></Label>
                        </StackLayout>
                    </ScrollView>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</StackLayout>

I haven't yet compared perceived performance if the outer *ngFor was instead a <ListView [items]="allrows"> , but I know that before the Angular approach, using a horizontal Repeater was noticeably faster for scrolling than the ListView.