Start an Ionic 2 App with the CLI

Build your first page component with Ionic 2

Use Sliding Gestures to Reorder an Ionic 2 List

Use the Ionic CLI to Generate Angular 2 Mobile Components

Fetch data from an API using Angular 2 HTTP module 

Lazy Load Data with Ionic 2

Navigate Between Mobile Screens  with the Ionic 2 NavController

Preview an Angular 2 Mobile  App with Ionic Lab

Create Angular 2 Mobile Card based layouts with Ionic 2

Use Ionic 2 NavController to Manipulate App History

Create an Overlay Component with the Ionic 2 Overlay API

Create a Native Mobile Side Menu Layout in Ionic 2

Building apps with Ionic 2

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](http://ionicframework.com/docs/2.3.0/api/components/infinite-scroll/InfiniteScroll/) and [Refresher](http://ionicframework.com/docs/2.3.0/api/components/refresher/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!

[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.

Course

Building apps with Ionic 2

Lazy Load Data with Ionic 2

Share this video with your friends