nis
ngx-infinite-scroller-fixed
npm i ngx-infinite-scroller-fixed
nis

ngx-infinite-scroller-fixed

Infinite and bidirectional scroll directive for Angular 11

by Lukasz Stasko

0.7.5 (see all)License:MITTypeScript:Built-In
npm i ngx-infinite-scroller-fixed
Readme

ngx-infinite-scroller

Infinite and bidirectional scroll directive for Angular 11

All notable changes to this project are documented in CHANGELOG.md file.

Installation

Run npm install ngx-infinite-scroller --save to install the library.

Usage

*.module.ts configuration

Include NgxInfiniteScrollerModule in your module

import { NgxInfiniteScrollerModule } from 'ngx-infinite-scroller';

@NgModule({
  declarations: [],
  imports: [
    NgxInfiniteScrollerModule,
  ],
  providers: [],
  bootstrap: []
})

*.component.html configuration

Include ngxInfiniteScroller directive in your *.component.html file

<ul id="scroller"
    ngxInfiniteScroller
    strategy="scrollingToBoth"
    (onScrollUp)="onScrollUp()"
    (onScrollDown)="onScrollDown()">
  <li class="news"
      *ngFor="let item of news">
    {{item.title}}
  </li>
</ul>

By default the directive works as an infinite scroll from the top to the bottom of your list. To switch to other modes, use input parameters like:
strategy="scrollingToTop"
strategy="scrollingToBottom" (default)
strategy="scrollingToBoth"

Default value of initial scroll position depends on the strategy value:
strategy="scrollingToTop" -> initialScrollPosition="BOTTOM"
strategy="scrollingToBoth" -> initialScrollPosition="MIDDLE"
strategy="scrollingToBottom" -> initialScrollPosition="TOP"

It is also possible to customize the default behaviour using an optional input field:
initialScrollPosition="TOP"
initialScrollPosition="MIDDLE"
initialScrollPosition="BOTTOM"
initialScrollPosition="50" (position in px)

*.component.ts configuration

Handle onScrollUp and onScrollDown actions in your *.component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';
import { share, finalize } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public news: Array<any> = [];

  private currentPage = 1;

  private request$: Observable<any>;

  constructor(private http: HttpClient) { }

  public ngOnInit() {
    this.getNews(this.currentPage)
      .pipe(finalize(() => this.onFinalize()))
      .subscribe((news) => {
        this.currentPage++;
        this.news = this.news.concat(news);
      });
  }

  public onScrollUp(): void {
    this.getNews(this.currentPage)
      .pipe(finalize(() => this.onFinalize()))
      .subscribe((news) => {
        this.currentPage++;
        this.news = news.concat(this.news);
      });
  }

  public onScrollDown(): void {
    this.getNews(this.currentPage)
      .pipe(finalize(() => this.onFinalize()))
      .subscribe((news) => {
        this.currentPage++;
        this.news = this.news.concat(news);
      });
  }

  // Prevent duplicate requests on scroll.
  // More: https://stackoverflow.com/a/50865911/6441494
  private getNews(page: number = 1): Observable<any> {
    if (this.request$) {
      return this.request$;
    } else {
      this.request$ = this.http.get(`https://node-hnapi.herokuapp.com/news?page=${page}`).pipe(share());
      return this.request$;
    }
  }

  private onFinalize(): void {
    this.request$ = null;
  }
}

*.component.scss configuration

Add some styling in your *.component.scss file

#scroller {
  height: 100vh;
  width: 700px;
  overflow: scroll;
  padding: 0;
  margin: 0;
  list-style: none;
}

.news {
  padding: 30px;
}

Development environment

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run npm run packagr to build the library. The build artifacts will be stored in the dist directory.

Publishing

Run cd dist && npm publish command to publish the package.

Downloads/wk

13

GitHub Stars

17

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

4

OPEN PRs

15
VersionTagPublished
0.7.5
latest
5mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate