Angular 2 with bootstrap JS

Question

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!

Andrei Zhytkevich · Accepted Answer · 2016-06-08 17:47:06Z

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>

answered Jun 8, 2016 at 17:47

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

minhnguyen Over a year ago

This one works well for me. This is my template:

<div class="progress">         <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" attr.aria-valuenow="{{ percentage }}" aria-valuemin="0"             aria-valuemax="100" [style.width]="percentage + '%'"></div>     </div>

Thierry Templier · Accepted Answer · 2016-04-09 18:21:19Z

1

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

http://valor-software.com/ng2-bootstrap/.

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>

answered Apr 9, 2016 at 18:21

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

3 Comments

TheUnreal Over a year ago

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],

Thierry Templier Over a year ago

Yes, it's not so obvious. See this question for more details: stackoverflow.com/questions/35865644/…. 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';

TheUnreal Over a year ago

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

Collectives™ on Stack Overflow

Angular 2 with bootstrap JS

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related