Can we use ListView within the pager? nested ng-templates?

[MuhammadTahir92]

<Pager row="1" [items]="items | async" #pager selectedIndex="5" (selectedIndexChange)="onIndexChanged($event)" class="pager"
    backgroundColor="lightsteelblue">
    <ng-template let-i="index" let-item="item">
        <GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
            <ListView class="list-group" [items]="countries">
                <ng-template let-country="item">
                    <RL:Ripple rippleColor="#e6e6e6" (tap)="dealDetails()">
                        <GridLayout rows="*" columns="*" class="padding">
                            <StackLayout orientation="vertical">
                                <Label class=" h6" style="font-size:13;" [text]='country.name'></Label>
                            </StackLayout>
                        </GridLayout>
                    </RL:Ripple>
                </ng-template>
            </ListView>
        </GridLayout>
    </ng-template>
</Pager>

[MuhammadTahir92]

any update on it?

[triniwiz]

The core version works fine i need to do more testing on the angular side

[MuhammadTahir92]

ok

[alexandruantonica]

@triniwiz ListView works fine inside of Pager with angular. I use something like that in my apps.
@MuhammadTahir92 I guess your problem is with Ripple plugin.
You use <RL:Ripple> instead of registering Ripple and use it like that <Ripple>.

[MuhammadTahir92]

@alexandruantonica i test it but its not working result is the same as before ?

can you share your code sample in which you are using angular listview with pager

[alexandruantonica]

Hi @MuhammadTahir92
Sure.
Below you have a sample of my code.

<Pager [items]="groupedProperties"
                       #pager
                       dock="top"
                       [selectedIndex]="currentPagerIndex"
                       (selectedIndexChanged)="onIndexChanged($event)">

                    <ng-template pagerItemTemplate let-i="index" let-properties="item">
                        <StackLayout>
                            <!-- profiles -->
                            <StackLayout [style.width]="card.width" [class]="card.classes[i]">
                                <DockLayout stretchLastChild="true" class="container" height="100%">
                                    ....
                                    <!-- content -->
                                    <DockLayout dock="bottom" class="card-container">
                                        <!-- info -->
                                        <ListView [items]="properties" class="list-group">
                                            <ng-template let-property="item">
                                                <StackLayout>
                                                    <Fields [item]="property" (tap)="onTap(property)"></Fields>
                                                </StackLayout>
                                            </ng-template>
                                        </ListView>
                                    </DockLayout>
                                </DockLayout>
                            </StackLayout>
                    </ng-template>
                </Pager>

If still doesn't work for you, please make an example in Playground and share with us. I guess it will be very useful for @triniwiz .

[MuhammadTahir92]

ok i will

[zeesulehria]

well i also got same issue hear
and this is my play ground link
https://play.nativescript.org/?template=play-ng&id=c79l7G

[zeesulehria]

its not showing any list item

[zeesulehria]

Found the issue. You have to use ListView in a component. Directly using ListView in Pager doesn't work.

[racknoris]

@zeesulehria What do you mean? A custom component?