How to bind a style to an element outside of the component using HostBinding

Question

I'd like to add overflow:hidden/visible to the body tag depending on whether a modal is visible or not. I'd like to achieve this with @HostBinding if possible but I don't know how.

Something like this is what I want:

constructor(private _modalApi: ModalApiService) {

  _modalApi.isOpen$.subscribe(
    modal => {
      this.overflow = this.isOpen ? 'hidden' : 'visible';
    }
  )
}

@HostBinding('body.style.overflow')
overflow: string;

I realise that @HostBinding binds to the host element which in this case would be the modal, but since @HostListener can listen to the document, window etc I thought that there might be a similar use case here.

Is this possible or do I have to make some weird workaround?

Note that I've looked at other questions suggesting to put your app component on the body tag and then doing it via the app component, however, I can't rely on another component since the idea is that this component shouldn't know about any app's structure and still work.

Günter Zöchbauer · Accepted Answer · 2016-10-18 11:37:14Z

2

This is not supported. As HostBinding indicates it binds to the host element of the component, not some arbitrary element.

The document:xxx, window:xxx, or body:xxx targets of the HostListener decorator is special.

You can use plain DOM access as a workaround or some other way to get an ElementRef and use the Renderer to apply styles or other settings.

edited Oct 18, 2016 at 11:37

answered May 25, 2016 at 16:16

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chrillewoodz Over a year ago

Then how would you go about doing this?

Chrillewoodz Over a year ago

Isn't "plain DOM access" bad though?

Günter Zöchbauer Over a year ago

That's right, it should be avoided. If you use any non-Angular2 JS libraries you're implicitly doing direct DOM access anyway. Then trying to avoid it in your own code is a bit pointless anyway. If you want to stick with the "correct" Angular2 approach you can use ElementRef and Renderer. How you can get an ElementRef of the target element depends on your app structor. It's hard to make suggestions with the available information.

Chrillewoodz Over a year ago

Looks like this will be a trickier thing to solve than I expected, thanks for the help anyways.

Collectives™ on Stack Overflow

How to bind a style to an element outside of the component using HostBinding

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related