How to show separate data for each bootstrap modal using angular

Question

I'm looping through images which oncliking a modal pops up with its info. The problem is that all the modals from all images appear to have the same , that of the first image

Here's what i've done.

data:any;

Html

<div  *ngFor =" let mydata of data">
   <img [src]="mydata.image" >
    <a href="" data-toggle="modal" data-target="#exampleModal">View info </a>
      <!-- Modal -->
<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p>{{mydata.info}}</p>
      </div>
    </div>
  </div>
</div>

</div>

I Got the solution from here

izmaylovdev · Answer 1 · 2022-02-01T19:01:51.607

This realization is very inefficient. But if forgot about that. You have a problem because of using the same id for every modal.

<div *ngFor ="let mydata of data; let i = index">
   <img [src]="mydata.image" >
    <a href="" data-toggle="modal" [attr.data-target]="'#exampleModal' + i">View info </a>
      <!-- Modal -->
<div class="modal fade " [attr.id]="'exampleModal' + i" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p>{{mydata.info}}</p>
      </div>
    </div>
  </div>
</div>

</div>

This will resolve the issue for one instance of the parent component (if you want to use this component multiple times, this implementation will not be working properly).

I'm getting an error " Can't bind to 'data.target' since it isn't a known property of 'a'." @izmaylovdev — Patiee, Feb 01 '22 at 10:27

How to show separate data for each bootstrap modal using angular

1 Answers1