title: Change dinamically attributes for Bootstrap Progress-Bar in Angular 5
body: <p>I have the following code and I want to 2 things:</p>
  
  <ol>
  <li><p>Change the bar color depending on the output of <code>verifyDifficulty(text1)</code> (<em>returns the length of the input text - mocks the difficulty of a password</em>)</p>
  
  <p>a.  if <code>verifyDifficulty(text1)&lt;=3</code> then bar color=red (progress-easy in css)<br>
  b. if <code>verifyDifficulty(text1)&gt;3 &amp;&amp; verifyDifficulty(text1)&lt;=6</code> then bar color=yellow (progress-medium in css)<br>
  c. if <code>verifyDifficulty(text1)&gt;6 &amp;&amp; verifyDifficulty(text1)&lt;=9</code> then bar color=light green (progress-hard in css)<br>
  d.  if <code>verifyDifficulty(text1)==10 then bar color=dark green</code> (progress-very-hard in css)     </p></li>
  <li>modify <code>aria-valuenow</code> value to be <code>verifyDifficulty(text1)*10</code> but when I try doing property binding I receive this error: <strong><em>Can't bind to 'aria-valuenow' since it isn't a known property of 'div'</em></strong></li>
  </ol>
  
  <p>My <strong>.ts</strong>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    name = 'Angular 6';
    text1 = '';
  
    verifyDifficulty(text) {
      const result = text.length;
      return result;
    }
  }
  </code></pre>
  
  <p>My <strong>.html</strong>:</p>
  
  <pre><code>&lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  &lt;div class="pb-1"&gt;
    &lt;input [(ngModel)]="text1" maxlength="10" placeholder="Text"&gt;
  &lt;/div&gt;
  &lt;p&gt;{{verifyDifficulty(text1)}}&lt;/p&gt;
  &lt;div  *ngIf="verifyDifficulty(text1)&lt;=3" class="progress"&gt;
    &lt;div class="progress-bar progress-easy" role="progressbar" aria-valuenow="60" aria-valuemin="0"
      aria-valuemax="100" [style.width]="verifyDifficulty(text1)*10+'%'"&gt;
      {{verifyDifficulty(text1)*10}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <strong>.css</strong>:</p>
  
  <pre><code>p {
    font-family: Lato;
  }
  
  .progress-bar.progress-easy{
    background-color: #fd0801;
  }
  
  .progress-bar.progress-medium{
    background-color: #c1b706;
  }
  
  .progress-bar.progress-hard{
    background-color: #8bdb06;
  }
  
  .progress-bar.progress-very-hard{
    background-color: #00b006;
  }
  </code></pre>
  
  <p>A live demo of this code <a href="https://stackblitz.com/edit/angular-uuatje" rel="nofollow noreferrer">is here</a></p>