CODEWITHSUNDEEP
twitter-bootstrapangularbootstrap-tablengforangular-components
Aakash Thakur
Aakash Thakur

Reputation: 3895

Button click showing same data in angular2

I have tried to populate a bootstrap modal with the details of respective rows in a table. Modal is showing fine but it is getting populated with only the first rows data on click of any of the buttons.

Here's a link:https://plnkr.co/edit/3tl6S9CuGCv8VxXsOq7Y?p=preview

What I have done is property binded the data value in component's pass @Input decorator as you can in the below code(Please refer to plunker in order to know more about the components):

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let data of datas'>
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
        <td>{{data.email}}</td>
        <td><detail-emp [pass]='data'></detail-emp></td>
      </tr>
    </tbody>
  </table>
  </div>

Now what I beleive is that when I pass individual data from datas in *ngFor to its component, respective row data should be passed. But it isn't the case. The modal on click of any modal button shows only the first rows data.

How can I make sure that only the data from the clicked row is shown in the modal and not always the first row's data.

Thanks in advance.

Upvotes: 0

Views: 663

Answers (1)

federico scamuzzi
federico scamuzzi

Reputation: 3778

try this:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#exampleModal_' + pass.id ">
  Show Data
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal_{{pass.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Employee Detail</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>Name : {{pass.name}}</p>
        <p>Age : {{pass.age}}</p>
        <p>Email : {{pass.email}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

the problem is in your ids of button and modal ..you need to SET A DIFFERENT ID (exampleModal_{{pass.id}}) FOR EACH MODAL IN EACH ROW .. AND THEN ATTACH THE BUTTON OF EACH GENERATED ID ([attr.data-target]="'#exampleModal_' + pass.id ") .. you were open always the same modal ..hope it helps

Upvotes: 2

Related Questions