ionic2 infinit scroll with http request

HI all :)…
I’m trying to implement infinit-scroll with a request I made from a service.
The current example dousnt show where the data is coming from…
I’m not sure how to load the data to the list after getting it

    public products: any;
    constructor(private code4sa: Code4Sa) {



    getProducts() {

            .then(data => {
                this.products = data;

    doInfinite(infiniteScroll) {
        console.log('Begin async operation');

        setTimeout(() => {
            for (var i = 0; i < 30; i++) {

            console.log('Async operation has ended');
        }, 500);

and in my view

        <ion-item *ngFor="#product of products">

    <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content loadingSpinner="bubbles"
                                     loadingText="Loading more data...">

Currently its only displaying blank tabs at the end. In other words I do not know how to only display 30 items fromthis.getProducts(); then keep on displaying more when you scroll down.

I solved this by creating a local variable containing the data and extending this data after a request. So I have the local variable Products and define it as an empty array. When the data comes in I execute:

this.products = this.products.concat(;

To merge the old with the new data.

Hi @osi , Sorry for being a noob but where do I place this. is this the local variable ?
Do I call this after getting the data ? could you provide more sample code

The res is the result from the API call. Something like this:

export class Product {

    productData = [];

    currentPage = 0;
    constructor(private product: ProductService) { }
    update(event?) {


            this.product.getProduct(this.currentPage).subscribe(res => {

                this.productData = this.productData.concat(;




thanks @osi but its not working for me. I’m not sure what I’m doing wrong