Detecting scroll events from a p-dialog

[louislourson]

Hi,

Is it possible to detect a scroll event from inside a p-dialog?

I am using the following code :

Code: Select all

<p-dialog [contentStyle]="{'max-height':'600px', 'max-width':'800px', 'overflow-y':'auto'}">

I would like to detect when my user has reached the bottom of the p-dialog. Use cases include enabling confirmation buttons only when the user has scrolled to the bottom of the licence agreement, or loading new data when the user has reached the bottom of the dialog.

Thank you.

[louislourson]

Here's how I managed to do it. Let me know if I did something horribly wrong :

Getting the primeng dialog in my component:

Code: Select all

@ViewChild('browseDialog', {static: true}) browseDialog: Dialog

ngOnInit on my component that has the dialog :

Code: Select all

  ngOnInit() {
    this.browseDialog.onShow.subscribe({
      next: this.handleOnShow.bind(this)
    });
  }

The handleOnShow adds a scroll event listener on the dialog's contentViewChild nativeElement

Code: Select all

  handleOnShow() {
    this.browseDialog.contentViewChild.nativeElement.addEventListener('scroll', this.scroll.bind(this));
  }

Finally, the scroll function detects when the scroll has reached the bottom :

Code: Select all

  scroll(e: Event) {
    let scrollTop: number = this.browseDialog.contentViewChild.nativeElement.scrollTop;
    let scrollMax: number = this.browseDialog.contentViewChild.nativeElement.scrollHeight - this.browseDialog.contentViewChild.nativeElement.clientHeight;
    if (!this.noMoreBlueprints && !this.working && scrollTop == scrollMax) {
      this.loadMoreBlueprints();
    }
  }

[gvinod@bitapps.com]

Is it possible to implement this feature to the PrimeNG Autocomplete component? Like detecting when scroll bar hits the bottom.
If so, could you please illustrate on how to do that?