javascript - on window scroll change a component style in angular 2? -

on window scroll how can capture scroll values , change position of 1 of component in dom in angular 2? found @hostlistener can used, doesn't work me , using following code :

   import { component, oninit, hostlistener } '@angular/core';  @component({   selector: 'app-submenu',   templateurl: './submenu.component.html',   styleurls: ['./submenu.component.scss'],   inputs : ['menuitems'] }) export class submenucomponent implements oninit {   public menuitems;   constructor() { }    ngoninit() {   }      @hostlistener('document:scroll', ['$event']) onscrollevent($event){       console.log($event);       console.log("scrolling");     }  } 

what best way capture dom events scroll,resize...etc in anguler 2?

you using way: @hostlistener. make work, better write directive in add listener.

import { directive, elementref, hostlistener } '@angular/core';  @directive({ selector: '[scroll]' }) export class trackscrolldirective {     constructor(private el: elementref) {    }    @hostlistener('document:scroll', []){    onscroll(): void {      this.el.nativeelement.setattribute('style','position:fixed')    } } 

make sure element has overflow:scroll