I am trying to customize the styles of a component that is not within the scope of my current component. The structure in my app.component.html looks like this:
<app-nav></app-nav>
<div id='content-container'>
<router-outlet></router-outlet>
</div>
My goal is to change the styles of a class main-nav
in the app-nav component from the 'home-component' which is loaded via a route. I have been using routerLink
s in the navigation, and by adding
encapsulation: ViewEncapsulation.None
to the home.component.ts
, I was able to modify the styles of the class in the app-nav component. However, these changes only take effect once, and when navigating to other routes using the routerLink
s, I am unable to undo the changes (it appears that the CSS is only loaded/applied when the component is initialized or comes into view).