Angular 2+ : Component style keeps affecting other components

3
votes

Got home component with background-color:red written into its scss and then got user component with background-color:green written into its scss. I start my app, I am at home, got red background, go to user page, got green background. Works like it should...but now when I go back my home component background is still green. All components have ViewEncapsulation.None. If I start navigation from user page, same things happen, but background colors vica-vera.

I always understood that point of component style is to affect only its component and not others. Is it not how that supposed to work?

Edit: If I set ViewEncapsulation.Emulated I see no styling from component style scss file being applied, so both pages are having white background. This is how my home component file looks:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    encapsulation: ViewEncapsulation.Emulated,
})

export class HomeComponent implements OnInit {

    ngOnInit() {

    }

}

Edit: You see my problem was that I was setting background color for <body>, but the body aint part of the template, this why encapsulation: ViewEncapsulation.Emulated and component stylesheets aint affecting it.

2
angular
ViewEncapsulation.None literally means "don't isolate view css" - Benjamin Gruenbaum
could you reproduce your issue on stackblitz/ plnkr? - Tushar Walzade
@TusharWalzade I think I figured it out. Thing is I am setting background color for body tag and body tag aint part of home or user template, so the component style is not applying for body. - user1203497
Could you show us a scss file ? - jaaso
You use bad design, you get bad results. There is a lot of ways to style the body without even bothering about view encapsulation. If your style collide, encapsulate. if your style aren't getting applied, check the variable names. Finally, if you don't know how to style the body using Angular, please provide a minimal reproducible example so that we can show you how to. - user4676340

2 Answers

1
votes

You need to encapsulate your view to Emulated, so that your component decorator will look like the following - 

@Component({
    // ...
    encapsulation: ViewEncapsulation.Emulated,
})

It will scope your styles to the specific component only.

Here's more reference about View Encapsulation

0
votes

The reason it never changes back to the expected color.

Because the first component loads its css in to the dom and stays their forever until the window is not closed. And the reason why the second time of route change is correct because it will override your same class, ids or tag styles that are existing once the second component is rendered.

So my suggestion is, make the use of router events and detect each paths you want to change colors and change the body element class.

example:

export class AppComponent {
  name = 'Angular';

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        console.log(event.url)
        if (event.url == '/') {
          document.body.className = 'home';
        } else if (event.url == '/test') {
          document.body.className = 'test';
        } else if (event.url == '/hello') {
          document.body.className = 'hello';
        }
      }
    });
  }
}

see stackblitz below for the complete guide:

https://stackblitz.com/edit/angular-svktf1