CODEWITHSUNDEEP
twitter-bootstraptypescriptangular6
Keerthi Reddy Yeruva
Keerthi Reddy Yeruva

Reputation: 889

Pass data to bootstrap modal in angular 6

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

Upvotes: 2

Views: 27532

Answers (3)

SAAD BELEFQIH
SAAD BELEFQIH

Reputation: 372

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>

Upvotes: 0

Keerthi Reddy Yeruva
Keerthi Reddy Yeruva

Reputation: 889

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>

Upvotes: 2

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18399

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.

Upvotes: 10

Related Questions