how create infinite scroll ionic 2 ?

providers
==========================
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsService {
  data: any;
  keyword:any;

  constructor(public http: Http) {
    this.data = null;
  }
  load() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      let url = "http://127.0.0.1:85/wordpress/wp-json/wp/v2/posts";
      this.http.get(url)
        .map(res => res.json())
        .subscribe(data => {

          this.data = data;
          resolve(this.data);
        });
    });
  }
  loadPostById(id: number) {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      let url = "http://127.0.0.1:85/wordpress/wp-json/wp/v2/posts/" + id;
      this.http.get(url)
        .map(res => res.json())
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }
  //infiniteScroll
  loadMorePost(PageId: number) {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      let url = "http://127.0.0.1:85/wordpress/wp-json/wp/v2/posts/?per_page=10&page=" + PageId;
      this.http.get(url)
        .map(res => res.json())
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }

  }
=========================
page 2 html
=====================
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Headline</ion-title>
  </ion-navbar>
  <ion-searchbar
    [(ngModel)]="keyword"
    [showCancelButton]="shouldShowCancel"
    (ionInput)="onCancel($event)"
    (keyup.enter)="Search(keyword,$event)">
  </ion-searchbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let x of news" (click)="itemTapped($event, x.id)">
  <img src="{{x.featured_image}}"/>
  <ion-card-content>
    <ion-card-title>
      {{x.title.rendered}}
      </ion-card-title>
      <div [innerHTML]="x.excerpt.rendered">
      </div>
  </ion-card-content>
</ion-card>
<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>

====================
Page 2 ts
====================
import { Component} from '@angular/core';
import {PageDetail} from "../../pages/detail/detail";
import { NavController, LoadingController } from 'ionic-angular';
import {NewsService} from '../../providers/news-service';
import 'rxjs/add/operator/map';
@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html',
})
export class Page2 {
  public news:any;
  public PageId:any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(
    public navCtrl: NavController,
    private newsData: NewsService,
    private loadingCtrl:LoadingController ) { }
  ionViewWillEnter(){
      let loading = this.loadingCtrl.create({
          content: 'Please wait...'
        });
        this.loadNews();
        loading.present();
        setTimeout(() => {
          loading.dismiss();
        }, 1000);
    }
    loadNews(){
      this.newsData.load()
      .then(data => {
        this.news = data;
        console.log(this.news);
      });
    }
    doRefresh(refresher) {
      this.loadNews();
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }
  doInfinite(infiniteScroll) {

    setTimeout(() => {

      infiniteScroll.complete();
    }, 2000);
  }
    itemTapped(event, item) {
    this.navCtrl.push(PageDetail, {
      item: item
    });
  }

}