title: Typescript Angular 5 add dynamically css to component
body: <p>I have a really special issue. I am using AngularTS with C# on serverside and Typescript on clientside.</p>
  
  <p>I want to add to our application the possibility, that the customer can add css styles in a textbox or add file locations (external). </p>
  
  <p>In a custom component I want to add the html code from the official site of the customer. The customer should add the css files or text in order to show the content on our page like the content of the official site.</p>
  
  <p>Unfortunately I could not find a possibility to add the css files. </p>
  
  <pre><code>@Component({
  selector: 'customer-footer',
  templateUrl: './customer-footer.component.html'
  styleUrls: getCSS()})
  
  
  
  
  export function getCSS(): string [] {
  var styles: string[] = [];
  
  styles.push("https://");
  
  return styles;}
  </code></pre>
  
  <p>This doesn't work because AOT is not compatible with static refs.</p>
  
  <p>I tried to add the css Content in styles Tag (Body-Area):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    &lt;style type="text/css"&gt;
        {{footerCSS}}&lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My best result was to add a Object (css) in ngStyle to the displaying .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div *ngIf="!fixedBottom"
       [innerHtml]="footerHtml"
       [ngStyle]="footerCSS"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately I could not find a way to convert css code like this one:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flatWeatherPlugin {
    font-size: inherit;
    width: 100%;
  }
  
  .flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul,  .flatWeatherPlugin li {
    padding: 0;
    margin: 0;
    color: inherit;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>To a functional object. Has someone an idea or a helpful message?</p>