title: Angular 2 - How do I conditionally add styles to my component?
body: <p>I have a component with a stylesheet that loads correctly like this:</p>
  
  <pre><code>@Component({
    selector: 'open-account',
    styleUrls: ['open-account.component.scss'],
    templateUrl: './open-account.component.html',
  })
  </code></pre>
  
  <p>I want to conditionally load another stylesheet if the string <code>widget=true</code> is present in the url but cannot get anyway to work.  I have tried:</p>
  
  <pre><code>var stylesArr = ['open-account.component.scss'];
  if (window.location.href.indexOf('widget=true') &gt; -1) stylesArr.push('open-account-widget-styles.component.scss');
  
  @Component({
    selector: 'open-account',
    styleUrls: stylesArr,
    templateUrl: './open-account.component.html',
  })
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var stylesArr = ['./open-account.component.scss'];
  if (window.location.href.indexOf('widget=true') &gt; -1) stylesArr.push('./open-account-widget-styles.component.scss');
  
  @Component({
    selector: 'open-account',
    styleUrls: stylesArr,
    templateUrl: './open-account.component.html',
  })
  </code></pre>
  
  <p>and</p>
  
  <pre><code>@Component({
    selector: 'open-account',
    styleUrls: ['open-account.component.scss', 'open-account-widget-styles.component.scss'].filter(elem =&gt; {
      if (elem === 'open-account.component.scss') return true;
      if (elem === 'open-account-widget-styles.component.scss' &amp;&amp; window.location.href.indexOf('widget=true') &gt; -1) return true;
    }),
    templateUrl: './open-account.component.html',
  })
  </code></pre>
  
  <p>and in at the top of my html:</p>
  
  <pre><code>&lt;style type="text/css" *ngIf="false"&gt;
  (the 'false' would be a variable, but putting in false doesnt even stop the style from loading)
  ...
  &lt;/style&gt;
  </code></pre>
  
  <p>What can I do to conditionally load an additional stylesheet like this?  Im not sure what else to try.</p>