Dynamic styleUrls in angular 2?

Question

Is it possible to dynamically inject urls to stylesheets into a component?

Something like:

styleUrls: [
  'stylesheet1.css',
  this.additionalUrls
]

or (wishful thinking and note that this is just fake code):

export class MyComponent implements dynamicUrls {

  ngDynamicUrls() {
    this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
  }
}

Because if you're gonna be able to override certain styles from stylesheet1 without having access to it, how are you supposed to do that? My only idea is to have dynamic styleUrls somehow but I don't think this is even possible from what I could find.

Any ideas?

Answer 1

It's possible in some maybe hack way it worked for me. You can manipulate Angular 2 Component decorator, create your own and return Angular's decorator with your properties.

  import { Component } from '@angular/core';

    export interface IComponent {
      selector: string;
      template?: string;
      templateUrl?: string;
      styles?: string[];
      styleUrls?: string[];
      directives?: any;
      providers?: any;
      encapsulation?: number;
    }

    export function CustomComponent( properties: IComponent): Function {
      let aditionalStyles: string;

      try {
          aditionalStyles =  require(`path to aditional styles/${ properties.selector }/style/${        properties.selector }.${ GAME }.scss`);
          properties.styles.push(aditionalStyles);
        } catch (err) {
          console.warn(err)
        }
      }

      return Component( properties );
    }

And in your component replace default angular 2 @Component with new one.

import { CustomComponent } from 'path to CustomComponent';

@CustomComponent({
  selector: 'home',
  templateUrl: './template/home.template.html',
  styleUrls: [ './style/home.style.scss']
})
export class ......

Answer 2

I have found a solution:
1. I have changed the styleurls to styles in the component decorator.
2. I will get my variable.
3. I will use the require command in my decorator.

import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
  })

  export class AppComponent {

   constructor() { }

  }

In this basic example I have imported the environment variable and changed the css string dynamically.

Answer 3

I used to have the same need to dynamically inject urls to stylesheets and eventually ended to initialize a component for each variable css (in my case 3 differents styles) with empty template and use them in my app component with ngIf condition.

Thanks to the use of property "encapsulation: ViewEncapsulation.None", the style of the selected component is then added to the header of the page and enable to get the correct renderer for the whole page.

Answer 4

I don't think you can have dynamic stylesheet URLs, because you cannot access your class property or method inside @Component decorator.

But you can achieve your goal by having dynamic style classes in your template.

Answer 5

I used the stylesheet link in the html template with ngIf condition, it worked for me.

<link rel='stylesheet' href="/stylesheets/classicTheme.css" *ngIf="theme === 'classic' " />
<link rel='stylesheet' href="/stylesheets/styleTheme.css" *ngIf="theme === 'style' " />