2

I have component A and component B.

I want component A background color to be black.

I want component B background color to be yellow.

If I modify the bg color inside the main style.css then that color will be set globally in my app.

If I try to modify the bg color inside the component css file the body bg color will not be affected.

Is there a way to modify the bg color for each component individually when they load ?

Avram Virgil
  • 1,170
  • 11
  • 22
  • Sure. If your question would be a bit more specific it would probably be easy to provide an answer. – Günter Zöchbauer Dec 06 '16 at 20:14
  • This question is specific for Angular 2, and not that much more to add, you have 2 components and I want to modify the body background color when you change the component. – Avram Virgil Dec 06 '16 at 20:27

1 Answers1

-4
@Component({... }) 
class MyComponent {   constructor() {
  this.bgColor = this.getRandomColor();   }

  @HostBinding('style.background-color')    
  bgColor;

  getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;   
  } 
}

Thanks for downvoting my answer because of the poor question title

Check instead other answers
- Style html,body from web component (Angular 2)
- Add class to body on Angular2
- Angular 2.x bind class on body tag
- ...

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567