Prime Community Forum

Posted: **21 Nov 2019, 19:02**

Hi,

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

I am using the following code :

<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.

Posted: **25 Nov 2019, 19:20**

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();
    }
  }

Posted: **11 Dec 2019, 14:10**

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?

Prime Community Forum

Detecting scroll events from a p-dialog

Detecting scroll events from a p-dialog

Re: Detecting scroll events from a p-dialog

Re: Detecting scroll events from a p-dialog