how to pass respective item details to a modal ng2-bootstrap?

Question

I'm using ng2-bootstrap modal

to display more details of an item. When I click on the respective item I want to display it's respective details to the modal.

Here is my code

<table  class="table table-hover table-bordered table-striped tableheader">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Gender</th>
    <th>City</th>
    <th>Country</th>
    <th>Age</th>
  </tr>
</thead>
  <tbody *ngFor="let item of results$ | async" >
     <tr   (click)="lgModal.show(item)">
      <td>
       {{item.firstName}}
      </td> 
      <td>{{item.lastName}}</td>
      <td>{{item.gender}}</td>
      <td>{{item.city}}</td>
      <td>{{item.country}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

When I click on the respective row I want to pass only respective user other details but it's passing complete json of my results$ to the modal Which is in the same Component

  <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Complete Details</h4>
      </div>
      <div class="modal-body">
        <div  >
           {{ item | json }} // not getting item details here
        </div>
      </div>
    </div>
  </div>
</div>

How to do this??

Answer 1

This is how I figured it out.

I created one more function and i passed the required data, through that function call.

In my component.html

<tr (click)="onClick(item,lgModal)">

In my component.ts

public selecteditem: Observable<Object>;

 onClick(item:any, lgModal:any){

   this.selecteditem = item;

   lgModal.show()

  //  console.log(this.selecteditem); // print in console

 }

modal body ( in component.html)

    <div class="modal-body">

     <pre>{{ selecteditem | json }}  </pre>

       // Example 

         <h5>SChool Name:{{selecteditem?.schoolName}}</h5>

      </div>