Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Lazy Load Data with Ionic 2

    Mike HartingtonMike Hartington

    A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.

    Infinite Scroll and Refresher can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

    angularAngular
    2 - 6
    ionicIonic
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Loading more data into our app can easily be done by using the ion-refresher component, and ion-infinite-scroll component. We'll look at the ion-refresher component first. To add this functionality, we'll modify our template and add the ion-refresher component between our ion-content and ion-list.

    00:19 Inside of that, we'll create an ion-refresher content, and ten close it out. Now to create the functionality we'll bind to the event ionRefresh, and call a method doRefresh, passing in the event.

    00:40 In our class, we'll create our doRefresh method and then call our service to get data from the random user API. With the data that comes back from our request, we'll take our original people array and use unshift plus a spread operator to add new data the front of our list.

    01:03 To notify our refresher that the request is done, we'll complete our subscribe and in the done callback, we'll call event.complete, this will notify the refresher that it should be done refreshing. We'll save, and then be able to pull down in our app and load more data.

    01:25 For infinite scroll, we more or less can follow the same pattern. We can go back to our template, and actually can take our ion-refresher component, copy and paste it below ion-list, and then rename it to ion-infinite-scroll. We'll also rename our event and method from ionRefresh and doRefresh to ionInfinite and doInfinite.

    01:48 We'll go back to our class and duplicate our doRefresh method. We'll rename it to doInfinite, and this time instead of unshift, we'll use push instead. Now we'll be able to pull for more data and scroll to load more as well.

    Discuss

    Discuss