title: Change angular material progress bar color from code
body: <p>I need to change the color of <a href="https://material.angular.io/components/progress-bar/overview" rel="noreferrer">angular material progress bar</a> dynamically.
  I realized that it is not that simple, so what is the best way to to it?</p>
  
  <p>requirements:</p>
  
  <ol>
  <li>I will receive the color hex code from an external API. So I can not create a set of predefined themes</li>
  <li>The background color will be white. So, I just need one color, not the entire palette (lighter, darker) colors.</li>
  </ol>
  
  <p>related link: <a href="https://stackoverflow.com/questions/50931171/angular-material-progress-bar-using-custom-colors">(1)</a> </p>