Question

143

Boostrap 4 Modal not working on Angular 2

rated 0 times [ 146] [ 3] / answers: 1 / hits: 17484 / 7 Years ago, fri, september 1, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

campbelljonahb

Add To Favorites

Follow

Total Points: 247

Total Questions: 97

Total Answers: 110

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

answered 7 Years ago blaisep · Accepted Answer

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