Forward Advance Learning

Infinite Scroll

Ionic provides us with an infinite scroll component. We drag close to the bottom of a list, and an event fires.

Infinite scroll looks like this:

<ion-item *ngFor="let i of items">{{i}}</ion-item>
<ion-infinite-scroll (ionInfinite)="loadItems($event)">

We listen for the event, get our data, and then call scroll.complete() to hide the spinner again.

templateUrl: 'build/pages/home/home.html'
export class HomePage {
loadItems(scroll) {
setTimeout(() => {
}, 2000);
constructor() {}

Read more here:

Exercise - Infinite Monkeys

In your exercise folder, you'll find a random dice throwing service. You can use this to generate random numbers.

Pull 20 random numbers, and use them to populate an array. Output the array as a list using ng-for. Make it so that when you scroll to the bottom, we append 20 more numbers to the list, so you can keep scrolling forever.