Getting Error while adding eventlistener to whole document

Question

I have a function which does some operations when scrollbar is moved .I have added eventlistener to that doucment using id but it is giving error

ERROR TypeError: Cannot read property 'nativeElement' of undefined

  ngOnInit() {
    document.getElementById('sidenav').addEventListener('scroll',()=> this.onScroll('$event'),true);  
    // window.addEventListener('scroll',this.onScroll,true);

  }

  ngOnChanges(changes: SimpleChanges) {
    this.data = changes.data.currentValue;
    this.data_display = changes.data.currentValue.slice(0, 6);
  }

  ngOnDestroy() {
    console.log('destroy')
    document.getElementById('sidenav').removeEventListener('scroll',()=> this.onScroll('$event'),false);
    // window.removeEventListener('scroll',this.onScroll,false)
  }

  // @HostListener('document:scroll', ['$event'])
  onScroll(event): void {
    const top = event.elementRef.nativeElement.scrollTop;
    const total = event.elementRef.nativeElement.scrollHeight;
    const height = event.elementRef.nativeElement.clientHeight;
    if ((height + top) === total) {
      if (this.data_display.length <= this.data.length) {
        this.data_display.push(...this.data.slice(this.start, this.end));
        this.start += 6;
        this.end += 6;
      }
      console.log('yes')
      this.cdr.detectChanges();
    }
  }

I suspect you are missing the `this` context inside the function `this.onScroll`. Perhaps all you need to do is change it to `document.getElementById('sidenav').addEventListener('scroll', () => this.onScroll(),true);` — Silvermind, Aug 19 '19 at 13:39

score 0 · Answer 1 · answered Aug 19 '19 at 13:41

0

In Angular, You can't add event listener directly by using addEventListener method. you can add it using @HostListener (which is the most preferred way) as below :

@HostListener('window:scroll', ['$event'])
scrollEvent(event) { 
    // Statements
 }

One more way you can do as below but callback of this is not removed when component is destroyed :

window.addEventListener("scroll", this.onScroll, true);

answered Aug 19 '19 at 13:41

Ankit Prajapati

2,670
2
12
22

How do you remove this event using ngondestroy()? – raj Aug 19 '19 at 13:45
`@HostListener` event will automatically removed when component is destroyed, so you do not have to destroy it manually, Refer : https://stackoverflow.com/questions/41031961/remove-or-destroy-event-listener/41032388#41032388 for more details – Ankit Prajapati Aug 19 '19 at 13:46
I have added console.log() line in the code in @HostListener('window:scroll', ['$event']) scrollEvent(event) { console.log('1') } this shouldn't print 1 when i move to another page and scroll – raj Aug 19 '19 at 13:53
If you want to add scroll globally then put it in `AppComponent` which is the parent of all components – Ankit Prajapati Aug 19 '19 at 14:16
In your code you have written `// @HostListener('document:scroll', ['$event'])`, you need to use `window` instead of `document`, comments need to remove, and the put method in `AppComponent` – Ankit Prajapati Aug 20 '19 at 07:29

Getting Error while adding eventlistener to whole document

1 Answers1