Angular2 change parent styles outside of component

Question

I'd like to change the styles of a component outside the scope of my current component. The markup in my app.component.html is as follows:

<app-nav></app-nav>
<div id='content-container'>
<router-outlet></router-outlet>
</div>

I'm looking to change the styles of a class main-nav in the app-nav component from the 'home-component' which is loaded from a route. I use routerLink 's in the nav and I've found if I add encapsulation: ViewEncapsulation.None to the home.component.ts I can alter the styles of the the class in the app-nav component however the changes are only applied once and if I go to other routes using the routerLink 's I cannot revert the changes (seems like the css is only loaded/applied once - when the component is initialized/comes into view)

Answer 1

change the styles of a component outside the scope of my current component

Before I say anything else, this is highly discouraged. Components are supposed to be self-contained entities , which can be reusable across your project, or even other projects. By creating a component that changes something else in the system only through CSS, you're creating a tight coupling which is difficult to see immediately from code, leading to difficult-to-debug bugs and other errors.

If you want to change your app-nav (or main-nav as you refer to it later, I'm not sure if this is my mistake) based on the current route, you should do so by injecting the ActivatedRoute and querying it to determine the specific version of header which you want.

Another option is to simply move the header below the router outlet, so you always direct access to it from the component which rests across the whole page.

the changes are only applied once and if I go to other routes using the routerLink's

This is expected, since the styles are injected into DOM only when you visit the actual component, no need for them to appear before there's need for it. Angular expects that the styles you define for a component and used only on that component. You're breaking this rule of thumb.

I cannot revert the changes (seems like the css is only loaded/applied once - when the component is initialized/comes into view)

Your observation is correct.

Answer 2

Special selectors are designed to access and apply css outside the encapsulation without having to change encapsulation scope. In your case I think :host or :host-context will help.

See https://angular.io/guide/component-styles#special-selectors

Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).

and

Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document element, and you want to change how your component looks based on that.

Use the :host-context() pseudo-class selector, which works just like the function form of :host(). The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. The :host-context() selector is useful when combined with another selector.