Detecting scroll events from a p-dialog

UI Components for Angular
Post Reply
louislourson
Posts: 2
Joined: 21 Nov 2019, 18:58

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 :

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
Posts: 2
Joined: 21 Nov 2019, 18:58

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests