docs(infinite-scroll): update docs for disabling infinite scroll

updates the breaking changes, usage, and test

closes #14908

angular/BREAKING.md

@@ -28,6 +28,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
 - [Fixed Content](#fixed-content)
 - [Grid](#grid)
 - [Icon](#icon)
+- [Infinite Scroll](#infinite-scroll)
 - [Item](#item)
 - [Item Divider](#item-divider)
 - [Item Options](#item-options)
@@ -490,6 +491,56 @@ _Note: we are no longer adding the `icon` class to an `ion-icon`, so the element
 
 The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed.
 
+## Infinite Scroll
+
+### Method Removed
+
+The `enable()` method has been removed in favor of using the `disabled` property on the `ion-infinite-scroll` element.
+
+**Old Usage Example:**
+
+```html
+<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
+  <ion-infinite-scroll-content></ion-infinite-scroll-content>
+</ion-infinite-scroll>
+```
+
+```javascript
+doInfinite(infiniteScroll) {
+  console.log('Begin async operation');
+
+  setTimeout(() => {
+    console.log('Async operation has ended');
+    infiniteScroll.complete();
+
+    // To disable the infinite scroll
+    infiniteScroll.enable(false);
+  }, 500);
+}
+```
+
+**New Usage Example:**
+
+```html
+<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
+  <ion-infinite-scroll-content></ion-infinite-scroll-content>
+</ion-infinite-scroll>
+```
+
+```javascript
+doInfinite(event) {
+  console.log('Begin async operation');
+
+  setTimeout(() => {
+    console.log('Async operation has ended');
+    event.target.complete();
+
+    // To disable the infinite scroll
+    event.target.disabled = true;
+  }, 500);
+}
+```
+
 
 ## Item
 

core/src/components.d.ts

@@ -2693,7 +2693,7 @@ declare global {
        */
       'complete': () => void;
       /**
-       * If true, the infinite scroll will be hidden and scroll event listeners will be removed.  Call `enable(false)` to disable the infinite scroll from actively trying to receive new data while scrolling. This method is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
+       * If true, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
        */
       'disabled': boolean;
       /**
@@ -2731,7 +2731,7 @@ declare global {
   namespace JSXElements {
     export interface IonInfiniteScrollAttributes extends HTMLAttributes {
       /**
-       * If true, the infinite scroll will be hidden and scroll event listeners will be removed.  Call `enable(false)` to disable the infinite scroll from actively trying to receive new data while scrolling. This method is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
+       * If true, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
        */
       'disabled'?: boolean;
       /**

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -47,8 +47,8 @@ export class InfiniteScroll {
    * If true, the infinite scroll will be hidden and scroll event listeners
    * will be removed.
    *
-   * Call `enable(false)` to disable the infinite scroll from actively
+   * Set this to true to disable the infinite scroll from actively
-   * trying to receive new data while scrolling. This method is useful
+   * trying to receive new data while scrolling. This is useful
    * when it is known that there is no more data that can be added, and
    * the infinite scroll is no longer needed.
    */

core/src/components/infinite-scroll/test/basic/index.html

@@ -21,13 +21,11 @@
 
     <ion-content id="content" padding>
 
-      <ion-button onclick="toggleInfiniteScroll()" block>
+      <ion-button onclick="toggleInfiniteScroll()" expand="block">
         Toggle InfiniteScroll
       </ion-button>
 
-      <ion-list id="list">
+      <ion-list id="list"></ion-list>
-
-      </ion-list>
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll">
         <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">

core/src/components/infinite-scroll/usage/angular.md

@@ -1,13 +1,18 @@
 ```html
-  <ion-content id="content">
+<ion-content>
+  <ion-button (click)="toggleInfiniteScroll()" expand="block">
+    Toggle Infinite Scroll
+  </ion-button>
+
   <ion-list></ion-list>
+
   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>
-  </ion-content>
+</ion-content>
 ```
 
 ```typescript
@@ -19,13 +24,25 @@ import { Component } from '@angular/core';
   styleUrls: ['./infinite-scroll-example.css']
 })
 export class InfiniteScrollExample {
+  @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
+
   constructor() {}
 
   loadData(event) {
-    setTimeout(function() {
+    setTimeout(() => {
       console.log('Done');
       event.target.complete();
-    }, 2000);
+
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (data.length == 1000) {
+        event.target.disabled = true;
+      }
+    }, 500);
+  }
+
+  toggleInfiniteScroll() {
+    infiniteScroll.disabled = !infiniteScroll.disabled;
   }
 }
 ```

core/src/components/infinite-scroll/usage/javascript.md

@@ -1,13 +1,18 @@
 ```html
-  <ion-content id="content">
+<ion-content>
+  <ion-button onclick="toggleInfiniteScroll()" expand="block">
+    Toggle Infinite Scroll
+  </ion-button>
+
   <ion-list></ion-list>
+
   <ion-infinite-scroll threshold="100px" id="infinite-scroll">
     <ion-infinite-scroll-content
       loading-spinner="bubbles"
       loading-text="Loading more data...">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>
-  </ion-content>
+</ion-content>
 ```
 
 ```javascript
@@ -17,6 +22,16 @@ infiniteScroll.addEventListener('ionInfinite', function(event) {
   setTimeout(function() {
     console.log('Done');
     event.target.complete();
-  }, 2000);
+
+    // App logic to determine if all data is loaded
+    // and disable the infinite scroll
+    if (data.length == 1000) {
+      event.target.disabled = true;
+    }
+  }, 500);
 });
+
+function toggleInfiniteScroll() {
+  infiniteScroll.disabled = !infiniteScroll.disabled;
+}
 ```