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

You can use the DOCUMENT token from @angular/platform-browser to gain access to all DOM element and then change the stylesheet source. Below is a simple example.

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class SomeComponent {

    constructor (@Inject(DOCUMENT) private document) { }

    Light() {
        this.document.getElementById('theme').setAttribute('href', 'light.css');
    }
}