How to pass data to bootstrap modal dialog in Angular2
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}}
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}} {{Number.label}}
<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
sunny arya
Updated on September 27, 2020Comments
-
sunny arya over 3 years
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">×</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>
-
sunny arya about 8 yearsPardeep, 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 about 8 yearsGunter, 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 about 8 yearsthanks pardeep, can you please share the code on your plunkr link.
-
sunny arya about 8 yearsthanks, pardeep, I could see the code that is there in plunker
-
sunny arya about 8 yearspardeep, 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.
-
Pardeep Jain about 8 yearsyeah sure buddy, but i did't get you, what exactly you want to do please update your question may clear something more for me.
-
sunny arya about 8 yearsWhen 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 ??
-
Pardeep Jain about 8 years@sunnyarya check my second update, hope this clears everything that you want.