Im trying to use one example from / , adding a modal to my navbar , but when clicking nothing happens.

<div class="pos-f-t fixed-top header">
    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
        <button class="navbar-toggler navbar-toggler-right" (click)="toggleSidebar()">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">Calculadora ISDB-Tb</a>
 <!-- Small modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
              ...
            </div>
        </div>
        </div>
    </nav> 
</div>

Im trying to use one example from https://v4-alpha.getbootstrap.com/components/modal/ , adding a modal to my navbar , but when clicking nothing happens.

<div class="pos-f-t fixed-top header">
    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
        <button class="navbar-toggler navbar-toggler-right" (click)="toggleSidebar()">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">Calculadora ISDB-Tb</a>
 <!-- Small modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
              ...
            </div>
        </div>
        </div>
    </nav> 
</div>

• javascript
• html
• twitter-bootstrap
• angular

• are you using @angular/material? – masterpreenz Commented Sep 1, 2017 at 2:48
• @masterpreenz mmm not sure what is that :/ – Ixam Deirf Commented Sep 1, 2017 at 2:49
• If you are not using ngx-bootstrap/ng-bootstrap. You probably forgot to add jquery – brijmcq Commented Sep 1, 2017 at 2:51
• @brijmcq can you give more direct solution please..dont know what you are trying to explain. – Ixam Deirf Commented Sep 1, 2017 at 2:52
• I can't help you with that information. Can you elaborate more on what you've done? – brijmcq Commented Sep 1, 2017 at 2:54

3 Answers 3

I strongly suggest you to use angular this for using bootstrap with angular as it has components required for angular and without jquery intervention.

Having said that for your question you should install jquery in your project using

npm install jquery --save

After that you have to include jquery in your project angular-cli under script section

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

After this in your component you have to declare $ for using jquery functions as

declare var $:any;

And in your template give an id to your modal

 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">

And call a function when the button is clicked

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" (click)="openModal()">Small modal</button>

And in your component define the function as

openModal(){
$('#myModal').modal('show');
}

Hope this helps.Let me know if any issue pops up

Make sure to include the bootstrap.min.js file in the scripts section of angular.json:

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

I was also running into the same issue for a couple of days. Finally, I changed the import statement of jQuery from:

import * as $ from 'jquery';

to:

declare var $ : any;