Angular 2 - How do I conditionally add styles to my component?

Question

I have a component with a stylesheet that loads correctly like this:

@Component({
  selector: 'open-account',
  styleUrls: ['open-account.component.scss'],
  templateUrl: './open-account.component.html',
})

I want to conditionally load another stylesheet if the string widget=true is present in the url but cannot get anyway to work. I have tried:

var stylesArr = ['open-account.component.scss'];
if (window.location.href.indexOf('widget=true') > -1) stylesArr.push('open-account-widget-styles.component.scss');

@Component({
  selector: 'open-account',
  styleUrls: stylesArr,
  templateUrl: './open-account.component.html',
})

and

var stylesArr = ['./open-account.component.scss'];
if (window.location.href.indexOf('widget=true') > -1) stylesArr.push('./open-account-widget-styles.component.scss');

@Component({
  selector: 'open-account',
  styleUrls: stylesArr,
  templateUrl: './open-account.component.html',
})

and

@Component({
  selector: 'open-account',
  styleUrls: ['open-account.component.scss', 'open-account-widget-styles.component.scss'].filter(elem => {
    if (elem === 'open-account.component.scss') return true;
    if (elem === 'open-account-widget-styles.component.scss' && window.location.href.indexOf('widget=true') > -1) return true;
  }),
  templateUrl: './open-account.component.html',
})

and in at the top of my html:

<style type="text/css" *ngIf="false">
(the 'false' would be a variable, but putting in false doesnt even stop the style from loading)
...
</style>

What can I do to conditionally load an additional stylesheet like this? Im not sure what else to try.

So you want to use different css if you load your components as a widget? how are you building your app? are you using AOT? — Sander Elias, Feb 28 '17 at 02:41
@SanderElias exactly, I want to load an additional sytlesheet if I am loading the component as a widget and I am building in AOT — georgej, Feb 28 '17 at 14:37
@SanderElias also, many of these approaches used to work before we switched the build to AOT, now none of them work — georgej, Feb 28 '17 at 14:55
Ther reason the won't work with AOT is there is a different order of execution. The code you use for 'selecting' the stylesheet is being called at compile-time, not runtime anymore. You can change the styles array before compilation, but not after. — Sander Elias, Mar 02 '17 at 06:19
Do you need your stylesheets to load at runtime, or is it ok to store them as part of your app code? — Sander Elias, Mar 02 '17 at 06:21
@SanderElias need them to load at runtime because it is conditional on the url that is entered for this page — georgej, Mar 02 '17 at 15:45

score 1 · Answer 1 · answered Feb 28 '17 at 06:28

1

 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');
    }
}

answered Feb 28 '17 at 06:28

Yoav Schniederman

5,253
3
28
32

what is the `theme` element you are getting by id? – georgej Feb 28 '17 at 14:38
@georgej theme is element ID – Yoav Schniederman May 19 '22 at 12:11

score 1 · Accepted Answer · answered Feb 28 '17 at 19:17

The only way I found it works is to do this:

addStyleSheet() {
  var headID = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.id = 'widget_styles';
  headID.appendChild(link);

  link.href = './app/open-account/open-account-widget-styles.component.css';
}

ngOnInit() {
  this.addStyleSheet();
}

Angular 2 - How do I conditionally add styles to my component?

2 Answers2

Linked