SwipeToRefresh

Angular 8 supported,

This package allow you to add swipe to refresh effect, (only work with touch, to test it use the chrome inspector in phone mode)

Update v7:

Adding two parameters to fix overscroll effect in ios.-

Last update: fix effect (has visual problem in previous version).

Install this package with the next command:

npm i ngx-swipe-to-refresh

How to use

Add to your project in the target page:

<lib-swipeToRefresh (refresh)="onRefreshRequested()"></lib-swipeToRefresh>

After load new data, you need advise to component, calling to:

endLoad()

You can do that using view child:

@ViewChild('refresher') refreshComponent: SwipeToRefreshComponent;

If you have problem with z-index, you can change tag css to fixed, and set z-index to go ahead another divs in your app. (This depends of your design)

Example:

App HTML (Angular default component example)

<lib-swipeToRefresh (refresh)="updateData()" #refresher></lib-swipeToRefresh>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

App Component

export class AppComponent {
  title = 'pullToRefresh';

  @ViewChild('refresher') refresher: SwipeToRefreshComponent;

  public updateData() {
    console.log('Load new data here...');
    setTimeout(() => {
      console.log('When load ends');
      this.refresher.endLoad();
    }, 3500);
  }
}

specific configuration:

In ios you may be need to force fixed element in order to prevent overscroll effect, and you must check the scroll externally via scrollTop, in that case you need to put enableManualScrollDetection property in true, and pass the boolean value trough isScrolling param.

Contact

If you have any question please contact me using email (in my profile).