CODEWITHSUNDEEP
angular
doorman
doorman

Reputation: 16959

Load css file dynamically for theming

I have three css files with different color themes e.g. theme1.css theme2.css theme3.css

I want to load them depending on the selected category. Is it possible to load css files dynamically in angular2? What´s the proper way to handle this?

Thanks!

Upvotes: 10

Views: 4486

Answers (1)

Sanket
Sanket

Reputation: 20047

I am not sure if this is proper way. But you can try like this-

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

    @Component({
    })

    export class SomeComponent {

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

        LightTheme() {
            this.document.getElementById('theme').setAttribute('href', 'light-theme.css');


        DarkTheme() {
            this.document.getElementById('theme').setAttribute('href', 'dark-theme.css');
    }
}

Reference: https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html

See if this helps.

Upvotes: 13

Related Questions