17

I am trying to display a paginated list, terefore, when the user scrolls down, I want to trigger a function that loads more items. But I cannot call the function on 'scroll' event.

This is how my HTML doc looks like: 

   <div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>

And in my .ts file, I have the following:

      import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef,  HostListener  } from '@angular/core';
        @Component({
            selector: 'header-component',
            templateUrl: 'header.component.html',
            styleUrls: ['header.component.css'],
            encapsulation: ViewEncapsulation.None,

        })

        export class HeaderComponent implements OnInit {
         constructor( ...){}


  scrollHandler(event){
    console.log(event);
    console.log('now you are scrolling');
  }

But it won't work this way. Nothing is displayed in my console. I tried in many other ways, such as using the @HostListener, but it did't work:

@HostListener('window:scroll', ['$event']) 
    dotheJob(event) {
      console.debug("Scroll Event", window.pageYOffset );
    }

Can you help me with this issue? Thank you! :)

Emanuela Colta
  • 2,129
  • 4
  • 18
  • 31
  • 1
    This only works if you scroll the whole page, if you want events for scrolling an element, you need to listen to `scroll` events of that element. Please provide more information (for example a Plunker) to get more detailed information. – Günter Zöchbauer Aug 31 '17 at 09:27

1 Answers1

22

You have given a different function name while using @HostListner.Modify your code as 

@HostListener('window:scroll', ['$event']) 
    scrollHandler(event) {
      console.debug("Scroll Event");
    }

and template 

<div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>

Please check the plunk here.Hope it helps.

The above code will trigger scroll function both when the page is scrolled as well as the div is scrolled .If you want only div scroll event,please use the following code

@HostListener('scroll', ['$event']) 
        scrollHandler(event) {
          console.debug("Scroll Event");
        }

This will be triggered only that div is scrolled.Find the plunk here

Vikhyath Maiya
  • 3,122
  • 3
  • 34
  • 68