Infinite scroll, also known as endless scrolling, is a popular technique used in web applications to load content dynamically as the user scrolls down the page.

We used scrollHeight, scrollY and clientHeight attribute of the element to find whether the scroll hit the bottom. Here is the code:

In ngOnInit() I am triggering loadMore method whenever user scrolls and reaches bottom as shown below:

The code is working fine, but the problem is whenever user scrolls in other component this loadMore method is calling in every component because we are using window.scroll method. Here we are scrolling in module3 but appraisal Cards are loading which should be loading in module2.

We can stop this method calling in ngDestroy method but we have to destroy in every component and the code becomes complicated. In this application we are using ngx-infinite-scroll which is provided by angular which makes code readable and reduces complexity.

Implementing Infinite Scroll in Angular with ngx-infinite-scroll

Infinite scroll is a popular technique used in web applications to load content dynamically as the user scrolls down the page. This approach provides a seamless browsing experience by fetching and displaying data progressively, eliminating the need for traditional pagination.

We will explore how to implement infinite scroll in an Angular application using the ngx-infinite-scroll package.

Creating a Component

We will create a new Angular component where we will implement the infinite scroll functionality.

Open your terminal and run the following command:

Implementing Infinite Scroll

Next, we need to install the ngx-infinite-scroll package. Open your terminal and run the following command:

Open the Module2.component.html file and add the following code:

In the Module.component.ts file, define the necessary properties and methods:

Explanation of Variables

scrollDistance: This variable determines the distance from the bottom of the page at which the onScrollDownAppraisal() method will be triggered. In other words, when the user scrolls down and reaches this distance from the bottom, more data will be loaded.

throttle: The throttle variable specifies the minimum time interval (in milliseconds) between consecutive scroll events. It helps to control the rate at which the scrolled event is triggered during rapid scrolling, improving performance by reducing the number of event handlers executed.

Conclusion

Infinite scroll is a powerful technique to enhance user experience by dynamically loading content as the user scrolls down the page. By using the ngx-infinite-scroll package in Angular applications, we can easily implement this feature. In this blog, we covered the basic setup and usage of ngx-infinite-scroll to achieve infinite scrolling behaviour.