Pass data to bootstrap modal in angular 6

Question

I am trying to add modal in my project so that if i click on the one link the modal should show name of that particular link.

But it giving me an Error

please check below link

link for modal

It is better to use angular version of bootstrap to do this. e.g. https://ng-bootstrap.github.io/#/components/modal/examples — Martin Adámek, Aug 14 '18 at 10:28
Thank you for your suggestion @MartinAdámek , but want to try with bootstrap 4 . I want to know why those errors are coming — Keerthi Reddy Yeruva, Aug 14 '18 at 10:35
It is still bootstrap 4, just different implementation, that plays nice with angular change detection. — Martin Adámek, Aug 14 '18 at 10:36

Martin Adámek · Accepted Answer · 2018-08-14T10:42:07.723

It is better to use angular version of bootstrap to do this, that plays nice with angular change detection.

e.g. https://ng-bootstrap.github.io/#/components/modal/examples

Then you will have one component representing your modal, and to pass data to it, just declare public property and do this:

const modalRef = this.modalService.open(YourModalComponent);
(modalRef.componentInstance as YourModalComponent).yourProperty = yourValue;

Btw to fix the error you are talking about, you could use attr property binding, like this:

<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + products.name">

It will fix the error, but the modal is still not working, looks like you are also missing CSS there.

score 2 · Answer 2 · edited Sep 05 '19 at 12:32

2

Got answer from this link

Update The code in

stackblitz line

we should use

 <button type="button" class="btn btn-primary" data-toggle="modal"
                          [attr.data-target]="'#'+products.name">
      {{products.name}}
 </button>

edited Sep 05 '19 at 12:32

Mustahsan

3,852
1
18
34

answered Aug 14 '18 at 11:36

Keerthi Reddy Yeruva

861
1
16
43

6

Well, i already gave you the same solution in my answer too :) – Martin Adámek Aug 14 '18 at 16:29

score 0 · Answer 3 · answered Apr 15 '20 at 20:49

in this example, i show how to pass Id to bootstrap modal because not a good idea to identify the model by another field than Id

<button  class="btn btn-primary" 
            data-toggle="modal" 
            [attr.data-target]="'#Model'+category.idCategory">Open Model
</button>

<div class="modal fade in" 
     id="Model{{category.idCategory}}"
     tabindex="-1"
     role="dialog"
     aria-labelledby="exampleModalLabel" 
     aria-hidden="true">......
</div>

Pass data to bootstrap modal in angular 6

3 Answers3

Linked