title: Angular 4 In Code override Bootstrap colors globally
body: <p>I am looking to create a dynamic coloring system with Angular. I created a service that has 4 strings,success, info, warning, danger with defaults of their color codes. I want to at the root of my application which I assume is at app.component because I am using routing to inject this service and override globally </p>
  
  <pre><code>.btn-warning {
      color: #fff; &lt;-- Inject my own color like so (color: AppSettings.ColorSettings.Warning)
      background-color: #f0ad4e; &lt;-- Inject my own color 
      border-color: #f0ad4e; &lt;-- Inject my own color 
  }
  </code></pre>
  
  <p>I want this to be dynamic so that if the user went into a settings panel could change these colors and in real time see the effect in every place that uses those classes.</p>
  
  <p>I see <code>[ngStyle]</code> but that applies specific things like colors to just one element. 
  I also see <code>[ngClass]</code> but I don't know how to create class that is more like a way to apply a class to an element.</p>
  
  <p>Could I do something like so?</p>
  
  <pre><code>&lt;html&gt;
  &lt;!-- Junk ^ with bootstrap up here --&gt;
  &lt;style&gt;{{GetColorSettings()}}&lt;/style&gt;
  &lt;!-- More stuff --&gt;
  &lt;/html&gt;
  </code></pre>