title: Edit dynamically pseudo-elements with angular 2
body: <p>I'm trying to edit dynamically that kind of css property in an angular 2 project, but with no success :(</p>
  
  <pre><code> progress::-moz-progress-bar {
              background: #278ce2;
          }
  </code></pre>
  
  <p>I want to add n progressbars on the same page. The color of the background is chosen by the user and is switched dynamically. The idea was to add a css property to each bar created like this :</p>
  
  <pre><code> classname::-moz-progress-bar {
          background: color;
      }
   classname::-webkit-progress-value {
          background: color;
      }
   classname[aria-valuenow]:before {
          background: color;
      }
  </code></pre>
  
  <p>As I want the possibility to create as much bars as the user wants, I can't name the classes before.</p>
  
  <p>Does anybody have an idea on how to do that ? If you need more details, just ask me.</p>