onScroll événement déclenche la fonction dans Angular4

J'essaie d'afficher une pagination de la liste, terefore, lorsque l'utilisateur fait défiler vers le bas, je veux déclencher une fonction qui charge plus d'éléments. Mais je ne peux pas appeler la fonction de défilement de l'événement.

C'est comment mon code HTML doc ressemble:

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

Et dans mon .fichier ts, j'ai le texte suivant:

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

Mais il ne fonctionne pas de cette façon. Rien ne s'affiche dans ma console.
J'ai essayé de bien d'autres façons, comme l'utilisation de la @HostListener, mais il n'a pas de travail:

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

Pouvez-vous m'aider avec ce problème? Merci!!!! 🙂

  • Cela ne fonctionne que si vous faites défiler toute la page, si vous voulez que les événements de défilement d'un élément, vous devez écouter scroll événements de cet élément. Veuillez fournir plus d'informations (par exemple un Plunker) pour obtenir des informations plus détaillées.