How can I Implement infinite scroll with observable provider


Hello, Im new to ionic. How can I implement ionic infinite scroll using this method of get data from the wordpress api?

This is my posts.ts

export class PostsPage {

  posts: Observable<Array<Post>>;


  constructor(public navCtrl: NavController, public navParams: NavParams, private data: DataProvider
   ) {

  ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');

  getPosts() {
      this.posts =;


        this.items = data;

  navigateToDetail(postId: number) {
    this.navCtrl.push( 'PostDetailPage', { postId: postId } );

this is my provider data.ts

  private rootUrl: string = '';
  private posts: string = 'posts';

  constructor(public http: Http) {

  getPosts() {
    return this.http.get(`${this.rootUrl}/${this.posts}`).map( res => res.json()).take(1);

  getPostById(id: number) {
    return this.http.get(`${this.rootUrl}/${this.posts}/${id}`).map( res => res.json() ).take(1);


Any help will be appreciated.


By following the tutorial ? :slight_smile:


I would like a little more help. like I said I am new at this. How do I use the function with my current code?


Can someone help me with this please?


I wasn’t able to get the infinite scroll to work. Can anyone help?


This solution worked for me. I adjusted the code to fit mine. Hope it helps others in the future