How to dynamically change progress bar in Angular, Boostrap

Got a Word object (for language vocabulary training app ), which contains number of correct and wrong answers. Trying to display a progress bar which will have info about this answers.

<div class="progress">

      <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 20%" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
    </div>

the ts:

@Input()
  word!: Word;

  totalAnswers!: number;

  ngOnInit(): void {
    this.totalAnswers = this.word.correctAnswers + this.word.wrongAnswers;
  }

Got no luck so far. Been trying different ways according to info i found, as you can see above. No green bar displayed at all at the moment, with red bar staying at fixed 20 percent. When i try to change its style.width, it disappears too.

Calculate percentage (preferably create separate variable in the component), and then set it as width with [style.width.%] notation.

Try this:

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width.%]="(100 * word.correctAnswers)/totalAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [style.width.%]="(100 * word.wrongAnswers)/totalAnswers" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
</div>

or with variables in the component:

  totalAnswers!: number;
  correctPercentage!: number;
  wrongPercentage!: number;

  ngOnInit(): void {
    this.totalAnswers = this.word.correctAnswers + this.word.wrongAnswers;
    this.correctPercentage = (100 * this.word.correctAnswers)/this.totalAnswers;
    this.wrongPercentage = (100 * this.word.wrongAnswers)/this.totalAnswers;

  }

<!-->

  <div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width.%]="correctPercentage" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [style.width.%]="wrongPercentage" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
</div>

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>

The green bar is not displayed on above code because the word.correctAnswers which was used to bind to style.width does not have a string value with the percentage sign like 2% or 25%. Im guessing it only has the number on it. So you can maybe do below to append the % sign.

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
      [style.width]="word.correctAnswers + '%'" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0"
      [attr.aria-valuemax]="totalAnswers"></div>

or bind it using [style.width.%]

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
      [style.width.%]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0"
      [attr.aria-valuemax]="totalAnswers"></div>

This will now display the greenbar based on width provided.