In this article, we’ll learn how to implement results display as an infinite scroller in Angular application. Its also called load more data. after a certain amount of scrolling the data.
For Infinite Scroll we used “ngx-infinite-scroll” plugin for implementing infinite scroll.
Let’s create a new project to demo for infinite scroll. For that, first, we need an angular project to create a project run below command.
ng new infinite-scroll-demo
“infinite-scroll-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd infinite-scroll-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the “ngx-infinite-scroll” npm package in our application. run below command to install.
npm i ngx-infinite-scroll
After installing the module we need to add “InfiniteScrollModule” in our app.module.ts file.
Display in the below code.
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@NgModule({
declarations: [...],
imports: [
.......,
InfiniteScrollModule
],
bootstrap: [...]
})
export class AppModule { }
After import, we can use it in our component. let’s take a simple example list of users first we show 40 users when we scroll it will add more user. For that, add the below code in your app.component.ts & app.component.html file.
@Input() | Type | Required | Default | Description |
---|---|---|---|---|
infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% – 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
infiniteScrollThrottle | number | optional | 150 | should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling. |
infiniteScrollDisabled | boolean | optional | false | doesn’t invoke the handler if set to true |
infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
For more API function you can refer their document.
Output
Below is the full embeded code for the paging . you can easily used in your application.
Example