How to apply themes in angular2?

Question

I need to provide two themes(red, blue) for the web application that I am developing in angular2. When I change the theme, all the components should reflect it?

What are

Answer 1

I am assuming that there are two buttons: one for red and other for blue. The theme will change based on button click of user.

Assign button click events as demoed in your HTML:

Red
Blue

Suppose you want theme change here in div section,

---

In Angular 2 you have to assign classes dynamically for css.

Red(){
document.getElementById('div1').className= 'redClass'; //notice id of div is div1
}

Blue(){
document.getElementById('div1').className='blueClass';
}

Now finally, In css change styling according to class:

div.redClass {
  background-color :red;
}
div.blueClass {
  background-color :blue;
}