Twitter Bootstrap Question posted in

Twitter-bootstrap modal doesn't work in angular-Twitter bootstrap

I am trying to implement a bootstrap modal in angular 7, but the modal is not working.

In my angular.json file in scripts I am including jquery.min.js and bootstrap.min.js in this order.

My component.html:

<button type="button" class="catalogue-button btn btn-primary btn-lg" data-toggle="modal"
         data-target="catalogueModal">Katalog</button>
         <!-- The Modal -->
         <div class="modal" id="catalogueModal">
            <div class="modal-dialog">
               <div class="modal-content">

                  <!-- Modal Header -->
                  <div class="modal-header">
                     <h4 class="modal-title">Modal Heading</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- Modal body -->
                  <div class="modal-body">
                     Modal body..
                  </div>

                  <!-- Modal footer -->
                  <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>

               </div>
            </div>
         </div>

When I click on the button nothing happens. The browser console is empty too.

I am using this https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Tags:

2

Answers


  1. 0

    To open a modal do the following modifications in your code:

    insert new button into your component.html file:

    <button (click)="showModal()">Show</button>

    In your typescript file for the same component add this method:

      showModal() {
    $("#catalogueModal").modal('show');
  }

    at the top of the file before @Component add this line:

    declare var $: any;
    Login or Signup to reply.
  2. 0

    Take a look at ngx-bootstrap. Its an ability to use bootstrap „the angular way“ without the need of jquery.

    It is well documented and you will find many small examples. Here is the documentation for using a modal.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search