nativescript angular how to load more data

Question

i want to load the data from api while scroll down . First time am displaying 15 data's after scroll down i want to show another 15 data.

this is my typescript code

this._search.application(p).then(
      data => {
        this.items = data["response"]["docs"];
      },
      error => {
        console.log("Subscription error:", error);
      }
    );

}

this is my html code

 <ListView *ngIf="dataRender" [items]="items"   separatorColor="transparent">
            <ng-template let-item="item">
                <StackLayout class="main" style="border:3px solid red">
                    <StackLayout class="content" style="border:3px solid red">
                        <Image (tap)="gtoview(item.id)" stretch="aspectFill" class="card-img" [src]="imagePath(item)">
                        </Image>
                        <GridLayout width="100%" columns="auto" rows="auto,auto,auto" class="" verticalAlignment="center">

                            <Label row="0"  col="1" class="item-name" textwrap="true" verticalAlignment="bottom"
                                horizontalAlignment="left" [text]="item.name"></Label>
                              <Label row="1"  col="1"  [text]="getAddress(item)"></Label> 

                           <Label row="2"  col="1" [text]="getPhone(item)"> </Label>

                        </GridLayout>
                        <StackLayout width="100%" marginTop="5" class="line"></StackLayout>

                    </StackLayout>

                    <StackLayout width="100%" class="lineBreak"></StackLayout>

                </StackLayout>
            </ng-template>
        </ListView>

Let me know how to use ?

Manoj Manoj · Accepted Answer · 2020-01-22T17:54:45

Use loadMoreItems event which is raised when the last item on your ListView is visible, you may hit the API and add more items to your array in the event callback.

nativescript angular how to load more data

1 Answers