Dynamic styleUrls in angular 2?

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?

5
Leave a Reply

avatar
5 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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… Read more »

Jason
Guest

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.

Jason
Guest

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.

Jason
Guest

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.

Jason
Guest

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' " />