CODEWITHSUNDEEP
twitter-bootstrapangular
TheUnreal
TheUnreal

Reputation: 24492

Angular 2 with bootstrap JS

I've been trying to use the progressbar animation of the powerful bootstrap library I'm used to, which worked great with Angular 1, but sadly not working with Angular 2.

My Angular 2 HTML:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
</div>

Caused this error:

EXCEPTION: Template parse errors:
Can't bind to 'aria-valuenow' since it isn't a known native property ("iv class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [ERROR ->]aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/"): AppComponent@22:2
Can't bind to 'aria-valuemax' since it isn't a known native property ("r progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" [ERROR ->]aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
"): AppComponent@22:49

If anyone can share an alternative way to use the bootstrap progressbar, I will appreciate it. Thanks!

Upvotes: 4

Views: 2847

Answers (2)

Andrei Zhytkevich
Andrei Zhytkevich

Reputation: 8099

The binding for attributes like aria-valuenow should look like [attr.aria-valuenow] (see more details in Angular 2 docs: Attribute, class, and style bindings). Double curly braces will go away as well.

The width in the style attribute should look like [style.width] (details Angular 2 docs: NgStyle)

So your snippet will look like this:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [attr.aria-valuenow]="enemy.HP" aria-valuemin="0" [attr.aria-valuemax]="enemy.HP" [style.width]="(enemy.HP/100)*100 + '%'">
      {{enemy.HP}} HP
  </div>
</div>

Upvotes: 9

Thierry Templier
Thierry Templier

Reputation: 202326

You could use ng2-bootstrap and its progress bar component. See the corresponding documentation:

Here is a sample from the documentation:

<div class="row">
  <div class="col-sm-4">
    <progressbar value="55"></progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped" value="22" 
                 type="warning">22%</progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped active"
                 max="200" value="166" type="danger"><i>166 / 200</i>
    </progressbar>
  </div>
</div>

Upvotes: 1

Related Questions