4

I am having a very weird issue. I have an Angular 2 App where I want to display a dialog box on one of the button clicks on one of the components.

Below is the code that i use in my template metadata section and it deosn't work.

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>

When I write all the above code in an HTML file and use templateUrl in my @Component decorator, the code works fine and I a get a dialog box on clicking the button.

In both cases, I am using the below given references to the Javascripts in the index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
sunny arya
  • 213
  • 2
  • 5
  • 20
  • Hi. Try ` – Dani Grosu Feb 23 '17 at 11:44
  • Check this [post](http://stackoverflow.com/a/35233667/1502615). Even I was facing the same problem. – Punith Mithra Apr 27 '17 at 16:50

0 Answers0