ngx-scroll-over

Made by @Vic-rider

ngx-scroll-over

here is a Demo

ngx-scroll-over is an Angular directive that will help you know if your element scroll is over.

Install

Run npm i ngx-scroll-over to install it.

Import

Navigate to the module or standalone component in which you want to use.

Example :

import { NgxScrollOverModule } from "ngx-scroll-over";

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    NgxScrollOverModule
  ],
  providers: [],
})
export class MessageModule { }

Use

You have to go to your template where you want to know when your scroll is over.

<div scrollOverCheck (scrollValue)="onValueEmitted($event)">
  \\ Here will be the list of contents to be scrolled 
</div>

Go to the template's controller "....ts".

export class ConversationComponent {

  onValueEmitted(value: any) {
    // console.log(value);
  }
}

The value emitted in the onValueEmitted function will be an object with the scroll state on all sides of the element.

Ex :

{
  atTop: true,
  atBottom : false,
  atLeft : true,
  atRight: false
}

Based on these states, you can know when the scroll is over and then load more data.