Help me please, error with 'infinite-scroll' in ionic 4

Ionic Framework
1

I am looking for a way to disable infinite-scroll, the code I am using shows error but you can work locally, the problem comes when running on android:

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)" #scroll>
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector    : 'infinite-scroll-example',
  templateUrl : 'infinite-scroll-example.html',
  styleUrls   : ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
  @ViewChild('scroll') infiniteScroll : IonInfiniteScroll;

  constructor() {}

  ngOnInit() {
    this.infiniteScroll.disabled = false;
  }
}

The error it shows is this :

    node_modules/@angular/core/core.d.ts:7888:47
    7888     (selector: Type<any> | Function | string, opts: {
    7889         read?: any;
    7890         static: boolean;
    7891     }): any;
    An argument for 'opts' was not provided.

Which is solved by adding the ‘static: false’ :

@ViewChild('scroll-infinite', { static : false }) infiniteScroll : IonInfiniteScroll;

But now it shows me the following error :

Error     : Uncaught (in promise): TypeError: Cannot set property 'disabled' of undefined
TypeError : Cannot set property 'disabled' of undefined

Point out the error on this line:

this.infiniteScroll.disabled = false;

Please some solution :pray:

2

I believe the answer is in this post…

…you have to wait for the @viewChild target to be created before you can use it.

1 Like
3

Use another lifecycle hook. Use «ngAfterViewInit» instead of «ngOnInit».