How to pass data to bootstrap modal dialog in Angular2

Question

I am trying to show up a dialog in an Angular 2 application. I am using the below code for that. I am able to open up the dialog and now I need to pass the data to the dialog, how can I do that ?? I tried writting JQuery code to do that but JQuery code doesnt work for me in the angular2 application.

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

Pardeep Jain · Answer 1 · 2016-06-03T05:24:20.933

6

Simply define data in the class and bind in the interpolation syntax of angular {{ }} , No need to use extra JQuery like this :-

Header: string = 'Angular2+Bootstrap Modal';
Text: string = "Description Here....";

and used in HTML like this:-

{{Text}} and {{Header}}

Working Plunker

Alternatively if you want to use this modal as component and want to pass data than you can use Eventemitter here is example Working Example With Eventemitter

Update - Setting Dynamic value in the modal

To Send data dynamically to the modal you have to create one component for the bootstrap modal. than by using @Input() you are able to set dynamic value in the modal like this :-

 @Input() header :any;

<div class="col-sm-12 col-md-6 text-center">
            <a *ngFor='#Number of data'>
                {{Number.id}} &nbsp; &nbsp; {{Number.label}} &nbsp; &nbsp;
                <delete [header]="Number.label" [pk]='Number.id'></delete><br>
            </a>
        </div>

Working Demo of Setting Dynamic Value in Modal

update2 HTTP request

you have to make http request in the ngOnInit hook of angular, you already got you dynamical data than you can do manipulation as you want :-

ngOnInit() {
    console.log(this.header);   // here is the value that you passed dynamically

    this.http.get('app/cities.json')    // making http request here 
      .map(res => res.json())
      .subscribe(res => console.log(res, "Subscribe Response"))
  }

Working Example With HTTP request

edited Jun 03 '16 at 05:24

answered May 27 '16 at 05:36

Pardeep Jain

84,110
37
165
215

Pardeep, this will work fine if you have static data. But in my case the data that needs to be sent to the the modal dialog is dynamic, what I have is that I have a label, and in front of every label there is a button and on click on that button, I need to send the value of label to my modal dialog. – sunny arya May 30 '16 at 03:37
thanks pardeep, can you please share the code on your plunkr link. – sunny arya May 30 '16 at 14:13
thanks, pardeep, I could see the code that is there in plunker – sunny arya May 31 '16 at 03:12
pardeep, I need your help again buddy. I got my dynamic value that I pass to my modal component. My requirement is that by using this value that I have passed, I have to make a GET request. For that, I will have to come back to my class section in my component. When I click on the button, my modal div in my HTML file gets displayed but how to come to my class section of my component to invoke a service from there. In-fact I need to take the input that I have passed, call a service first and then display my modal dialog with the data that I got from my service. – sunny arya Jun 01 '16 at 16:36
yeah sure buddy, but i did't get you, what exactly you want to do please update your question may clear something more for me. – Pardeep Jain Jun 01 '16 at 19:14
When I click on the button on my base component ,I need to take the input that I have passed, call a web-service and then display my modal dialog with the data that I got from my service. Does this make it clear ?? – sunny arya Jun 02 '16 at 16:55
@sunnyarya check my second update, hope this clears everything that you want. – Pardeep Jain Jun 03 '16 at 05:25

score -1 · Answer 2 · edited May 27 '16 at 05:13

You shouldn't have to use jquery to show data in Angular.

You could do something like this.

@Component({
  template:`<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>{{modal.text}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>`
})

export class ComponentThatUSESMODAL{
   public modal = {
    "header":"MODAL HEADER",
    "text" : "MODAL TEXT"
   };
   constructor(){}
}

Gunter, this will work fine if you have static data. But in my case the data that needs to be sent to the the modal dialog is dynamic, what I have is that I have a label, and in front of every label there is a button and on click on that button, I need to send the value of label to my modal dialog — sunny arya, May 30 '16 at 03:39

How to pass data to bootstrap modal dialog in Angular2

2 Answers2

Update - Setting Dynamic value in the modal

update2 HTTP request

Linked