Boostrap 4 Modal not working on Angular 2

Question

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>

Solution 1

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

Solution 2

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