Infinite bidirectional scroll directive for Angular 11
npm install ngx-infinite-scrollerInfinite and bidirectional scroll directive for Angular 11
All notable changes to this project are documented in CHANGELOG.md file.
Run npm install ngx-infinite-scroller --save to install the library.
Include NgxInfiniteScrollerModule in your module
``typescript
import { NgxInfiniteScrollerModule } from 'ngx-infinite-scroller';
@NgModule({
declarations: [],
imports: [
NgxInfiniteScrollerModule,
],
providers: [],
bootstrap: []
})
`
Include ngxInfiniteScroller directive in your *.component.html file
`html` ngxInfiniteScroller
strategy="scrollingToBoth"
(onScrollUp)="onScrollUp()"
(onScrollDown)="onScrollDown()">
*ngFor="let item of news">
{{item.title}}
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="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)
Handle onScrollUp and onScrollDown actions in your *.component.ts file
`typescript
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
private currentPage = 1;
private request$: Observable
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
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;
}
}
`
Add some styling in your *.component.scss file
`scss
#scroller {
height: 100vh;
width: 700px;
overflow: scroll;
padding: 0;
margin: 0;
list-style: none;
}
.news {
padding: 30px;
}
`
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.
Run cd dist && npm publish` command to publish the package.