Hey there, I'm new to Angular 4 and running into some troubles with styling my application. I tried adding a background image to the body, which worked fine, and then added a component to display content, also looking good.
Now, when I added a second component with a different route, I didn't want the body to have the same background image. I've been reading up on best practices and came across the idea of having a separate style for the body at the component level by using a body style override in styleUrls. However, every time I switched from one route to another, the background stayed the same instead of changing based on the component. Could this be due to my use of ViewEncapsulation set to None?
In addition, here is how my setup looks:
index.html:
<head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>
Welcome.component.html:
<section id="hero">
<div>
</div>
</section>
The welcome component displays the background correctly, but as soon as I navigate to another component using something like "this.router.navigate(['/page2']);", the background remains the same. If I refresh on /page2, the correct background appears.
UPDATE: I decided to give up on showcasing a background image for the second component, while still maintaining it for the first one. After removing ViewEncapsulation from all components, moving the body {} to the first component resulted in the background not showing up (even though the path was correct). Is there a better solution than resorting to DOM manipulation? What would be considered the best practice in this scenario?