feat(infinite-scroll): it can be enabled/disabled from a ng input (#8385)

closes #8380

Author: manucorporat

src/components/infinite-scroll/infinite-scroll.ts

@@ -135,6 +135,16 @@ export class InfiniteScroll {
     }
   }
 
+  /**
+   * @input {boolean} Whether or not the infinite scroll should be
+   * enabled or not. Setting to `false` will remove scroll event listeners
+   * and hide the display.
+   */
+  @Input()
+  set enabled(shouldEnable: boolean) {
+    this.enable(shouldEnable);
+  }
+
   /**
    * @output {event} The expression to call when the scroll reaches
    * the threshold distance. From within your infinite handler,
@@ -221,6 +231,9 @@ export class InfiniteScroll {
     this._setListeners(shouldEnable);
   }
 
+  /**
+   * @private
+   */
   _setListeners(shouldListen: boolean) {
     if (this._init) {
       if (shouldListen) {

src/components/infinite-scroll/test/basic/app-module.ts

@@ -29,7 +29,6 @@ export class E2EPage1 {
 
       if (this.items.length > 90) {
         this.enabled = false;
-        infiniteScroll.enable(this.enabled);
       }
     });
   }
@@ -40,7 +39,6 @@ export class E2EPage1 {
 
   toggleInfiniteScroll() {
     this.enabled = !this.enabled;
-    this.infiniteScroll.enable(this.enabled);
   }
 }
 

src/components/infinite-scroll/test/basic/main.html

@@ -23,7 +23,7 @@
     </button>
   </ion-list>
 
-  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" [enabled]="enabled" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">