4

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!

TheUnreal
  • 23,434
  • 46
  • 157
  • 277

2 Answers2

9

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>
Andrei Zhytkevich
  • 8,039
  • 2
  • 31
  • 45
1

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>
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I already loooked up for it but had terrible time installing it, somehow I get `GET http://localhost:3000/ng2-bootstrap 404 (Not Found)`, after installing it with `npm install --save ng2-bootstrap`, added this: `import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from '../../../ng2-bootstrap';`, and the directives `directives: [PROGRESSBAR_DIRECTIVES, CORE_DIRECTIVES],` – TheUnreal Apr 09 '16 at 18:34
  • Yes, it's not so obvious. See this question for more details: http://stackoverflow.com/questions/35865644/integrate-bootstrap-module-and-ng2-select-module-to-angular2-5min-quickstart/35866957#35866957. There are some configurations in SystemJS to do. Then you can import components like this: `import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';` – Thierry Templier Apr 09 '16 at 18:39
  • Updated my SystemJS, but the same error appears. it is not the same error as shown in the question above. I've been trying to google my error, but all solution didn't work for me – TheUnreal Apr 09 '16 at 18:56