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
         


        

Answer 1

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.