Angular2: Directive variable change, update element

Question

I'm currently trying to give classes to an wrapper that contains all of my app, i usually find this handy for giving certain states like when the header is fixed, or the menu's are opened etc.

So upon reading through some the docs of angular i should probably use an 'Directive'. Now i got this all set up and it looks like this:

constructor(private router:Router, @Inject(DOCUMENT) private document:Document, el:ElementRef, renderer:Renderer) {
    this.setClasses(el, renderer);
}

setClasses(el:ElementRef, renderer:Renderer) {
    renderer.setElementClass(el.nativeElement, 'header-fixed', this.headerFixed);
}

@HostListener("window:scroll", [])onWindowScroll() {
    let number = this.document.body.scrollTop;

    if (number > 100) {
        this.headerFixed = true;
    } else if (this.headerFixed && number < 10) {
        this.headerFixed = false;
    }
}

Now this is working perfectly but as you can see i'm toggling the headerFixed variable depending on scroll position. However i could of course run the function setClasses() again and it will work but is there anyway to subscribe/watch the variable and update automatically when changed?

Or is there even a better way of achieving wat i'm trying to do?

Answer 1

You can use @HostBinding like:

@HostBinding('class.header-fixed') get myClass() { 
  return someCondition; 
}

Plunker Example