Tracking scroll position and notifying other components about it

by

I think the easiest way is each interested component listening to the scroll event.

  @Component({
    ...
    // alternative to `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // see András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }

plunker

Plunker using @HostListener()

Hint:

bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

makes the directive universal without adding it to every components directive: [...] list.

More Related Contents:

  1. How to smooth scroll to page anchor in angular 4 without plugins properly?
  2. Dynamically add event listener
  3. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  4. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  5. Use component from another module
  6. Global Events in Angular
  7. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  8. Angular and Typescript: Can’t find names – Error: cannot find name
  9. Angular 2 Scroll to top on Route Change
  10. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  11. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  12. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  13. async/await in Angular `ngOnInit`
  14. How to inject service into class (not component)
  15. Emit event from parent to child
  16. Angular2 router keep query string
  17. Angular 2 ‘component’ is not a known element
  18. How to make a sequence of http requests in Angular 6 using RxJS
  19. How to set unique template reference variables inside an *ngFor? (Angular)
  20. Getting Image from API in Angular 4/5+?
  21. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  22. Angular 4 HttpClient Query Parameters
  23. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  24. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  25. Type casting within a template in Angular 2
  26. Property ‘toPromise’ does not exist on type ‘Observable’
  27. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  28. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment