1

Is it possible to have Angular @HostListener('window:scroll',) in simple Service not Component or Directive code?

I don't want to polute any of my components, since the awareness of scroll should be injected in several other services... Currently i have following code that compiles, but does not work somehow. 

import { Component, OnInit, Injectable, Inject, HostListener } from '@angular/core';
import { SearchService } from './search.service';
import { DOCUMENT } from '@angular/platform-browser';

const scrollStepToReload = 3700;

@Injectable()
export class ScrollWatcherService {

  private maxReachedScroll = 0;
  private lastLoadedAt = 0;

  constructor(private searchService: SearchService, @Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll', ['$event'])
  onScroll($event) {

    const scrollOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    console.debug("Scroll Event", scrollOffset);

    if (scrollOffset > this.maxReachedScroll) {
      this.maxReachedScroll = scrollOffset;
    }
    if (this.lastLoadedAt + scrollStepToReload < this.maxReachedScroll) {

      this.lastLoadedAt = this.maxReachedScroll;
      this.searchService.continueSearch();

    }
  }
}

Similar code works i Component as desired. Any ideas how to get it run in a service? or something similar?

aholbreich
  • 4,951
  • 2
  • 23
  • 38
  • Shouldn't `Renderer2.listen` help you? – yurzui Dec 22 '17 at 15:53
  • Have you looked into this https://stackoverflow.com/a/44765844/765965 – Al-Mothafar Dec 22 '17 at 15:54
  • @yurzui "Renderer2.listen" has neo meaning to me... Sorry angular beginner – aholbreich Dec 22 '17 at 16:01
  • @Al-Mothafar of course, and it worked on Component, but now trying to listen in a Service – aholbreich Dec 22 '17 at 16:01
  • https://stackoverflow.com/questions/46389002/how-to-listen-for-mousemove-event-on-document-object-in-angular/46389054#46389054 – yurzui Dec 22 '17 at 16:01
  • @yurzui you pointing to "3)" method here? Could you elaborate? – aholbreich Dec 22 '17 at 16:03
  • Yep, i was talking about `3`. You can also use method `5` – yurzui Dec 22 '17 at 16:04
  • Even it's a very valid reference, there is no meaning of wether it can work form service. Examples are with Component. Now i've tried 5) ' ngOnInit(): void { Observable.fromEvent(window, 'scroll').subscribe(e => console.log('Observed scroll:', e) ); }' and it doesn't work in service – aholbreich Dec 22 '17 at 16:31
  • @yurzui and same code 5) greatly works if placen in Component... With tath i've placed Subscription into one of the components but the logic into the service, so i trigger #onScroll() with scrollOffset manually now... Kinde half of the desired solution with that. – aholbreich Dec 22 '17 at 16:36
  • Possible duplicate of [Is it possible to use HostListener in a Service?](https://stackoverflow.com/questions/39592972/is-it-possible-to-use-hostlistener-in-a-service) – GreyBeardedGeek Dec 22 '17 at 18:17

1 Answers1

5

You cannot have a HostListener in a service. Use the classic:

window.addEventListener('scroll', () => { console.log('scrolling'); });

Frangiskos
  • 626
  • 1
  • 6
  • 7