Implementing Infinite Scroll in Ionic 2

Question

I am trying to implement the Infinite Scroll functionality in Ionic 2 but the function (which should get called up on onInfinite) is not getting called.

Here I am not able to get even the statement console.log('Begin async operation'); called, which is the first statement in the doInfinite function which should get called whenever the Infinite Scroll event happens.

search.html

<ion-header>
  <ion-navbar>
<button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding style="overflow-y: auto">
<ion-searchbar (ionInput)="search($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let product of products" (click)="itemTapped($event, product)">
    {‌{ product.name }}
  </ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content 
loadingSpinner="bubbles"
      loadingText="Loading more data..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

search.ts

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';  
import { FetchProducts } from '../../providers/fetch-products.service';
import { SearchProduct } from '../../providers/search-product.service';
import { NavController, NavParams} from 'ionic-angular';
import { ProductDetailPage} from '../product-detail/product-detail';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
    providers: [ FetchProducts , SearchProduct ]
})
export class SearchPage {
   public products: Array<any> = [];
   public s_products: any;
   public searchQuery: any = '';
   items: string[];
   public productDetail: any;
   public perpage: number = 2;
   public start: number =1;
   public offset: any = 0;
   public canLoadMore : any = true;
  constructor(public http: Http, public fetchProducts: FetchProducts, public searchProduct : SearchProduct, public navCtrl: NavController, public navParams: NavParams) {

    this.loadProducts();

  }
  itemTapped(event, product) {
    this.navCtrl.push(ProductDetailPage, {
      product: product
    });
    console.log("itemTapped:" + product);
  }

   search(searchEvent) {
    this.searchQuery = searchEvent.target.value;

    console.log("Typed value is:" + this.searchQuery + "Offset Value is dsd:" + this.offset);
    if (this.searchQuery.trim() !== '' || this.searchQuery.trim().length > 3) {
      this.fetchProducts.searchProducts(this.searchQuery, 0).subscribe(products => {
        this.products=products;
    console.log(this.products);
      });
    }
    this.canLoadMore = true;
    this.offset += 2;
  }
 doInfinite(infiniteScroll: any) {
    console.log('Begin async operation');
    setTimeout(() => {


    console.log("Typed value is:" + this.searchQuery + "Offset Value is:" + this.offset);
    this.fetchProducts.searchProducts(this.searchQuery, this.offset).subscribe(products => {
     this.products.push(products);
     console.log(this.products);
     if(products.length < 10){
      this.canLoadMore = false;
      console.log("No more products");
      return;
      }
      else{
      this.offset += 2;
      }
    });

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }
  loadProducts(){
   this.fetchProducts.load()
   .then(data => {;
    for(var i = 0; i < ( data.length ); i++){
     this.products.push(data[i].name);

    }


    console.log(this.products);
  });
 }


}