Cannot use Bootstrap JS in Angular2

Question

I am using angular-cli to create a project that uses some of the bootstrap js functions like button() and modal(), but the problem is that while I am able to compile my ts file perfectly when I actually try to execute the javascript function in the browser it fails with

error_handler.js:53 TypeError: button.button is not a function
    at NewdeviceComponent.loading (newdevice.component.ts:122)
    at NewdeviceComponent.add (newdevice.component.ts:97)
    at CompiledTemplate.proxyViewClass.View_NewdeviceComponent0.handleEvent_67 (component.ngfactory.js:517)
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408)
    at HTMLButtonElement.<anonymous> (dom_renderer.js:276)
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (ng_zone.js:227)
    at ZoneDelegate.invokeTask (zone.js:264)
    at Zone.runTask (zone.js:154)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:335)

I am invoking the button function on after a click event like the following-:

button.button(loading ? 'loading' : 'reset');

The weird part is that VSCode gives me intelli sense and compilation actually succeeds but fails in the browser.

All the bootstrap files and styles sheets are globally loaded from the angular-cli.json.

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]

@AngularFrance In the angular-cli.json. the scripts section. Check the edit. — ng.newbie
– ng.newbie, Commented Jan 24, 2017 at 10:15
Sounds about right. Maybe you need to use a wrapper library like github.com/valor-software/ng2-bootstrap? — AngularChef
– AngularChef, Commented Jan 24, 2017 at 10:25
@AngularFrance No I don't think so. If the files are loaded I should be able to use them. What's the reason I cannot use them over here ? — ng.newbie
– ng.newbie, Commented Jan 24, 2017 at 10:29

pkozlowski.opensource · Accepted Answer · 2017-01-24 10:42:39Z

1

Using Bootstrap's JS means that you would have to load jQuery, Bootstrap's JS and potentially create Angular wrappers around Bootstrap's JS code. But even doing so would result in rather poor integration since both jQuery and Angular would "fight" over DOM updates - the philosophy of those 2 libraries is very different.

In Angular context it is better to use a dedicated, native libraries that provide much better API for the Angular users. There is an excellent implementation for Angular and Bootstrap 4: https://ng-bootstrap.github.io. By using it you could skip the whole jQuery / Bootstrap JS story.

answered Jan 24, 2017 at 10:42

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

6 Comments

ng.newbie Over a year ago

Is there wrapper for Bootstrap 3 ?

AngularChef Over a year ago

@pkozlowski.opensource: What's the main difference between ng-bootstrap.github.io and github.com/valor-software/ng2-bootstrap?

pkozlowski.opensource Over a year ago

The one I've mentioned is for Bootstrap 4. This makes sense since Bootstrap 3 is not maintained any more and Bootstrap 4 is approaching Beta.

ng.newbie Over a year ago

Yeah but my entire project is with bootstrap3

pkozlowski.opensource Over a year ago

@AngularFrance I would argue that APIs (ease of use, flexibility) and quality of ng-bootstrap is far superior. This is mostly due to the fact that some of ng-bootstrap members are also part of the Angular team. Another reason is strong focus on automated testing. I can reach out to you with more details if interested.

|

Collectives™ on Stack Overflow

Cannot use Bootstrap JS in Angular2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related