how to display a data in a modal using angular 2 - html

Question

I have a table with button. What I need is when I click on the button in the table , a modal diplay with its value.
My problem is how to pass the table's value to the modal. Can any one help me, here is the code
<div style="margin-top: 50px" class="col-md-12">
<div class="card">
<div class="card-block">
<div class="horizontal-scroll">
<table class="table table-condensed">
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Durée (jours)</th>
<th>Coût (TalanCoin)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of formations">
<td>{{ item[1] }}</td>
<td style="margin-left: 4cm;">
<button type="button" class="btn btn-info btn-icon" (click)="smModal.show()"><i class="ion-information"></i></button>
</td>
<td>{{ item[3] }}</td>
<td>{{ item[4] }}</td>
<td >
<button class="btn btn-success" (click)="clicked(item[4],lgModal)">Participer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="mySmallModalLabel" aria-
hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close"
(click)="smModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Description</h4>
</div>
<div class="modal-body" style="color: black;">
<!--here I want to display the value selected from the table-->
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn"
(click)="smModal.hide()">Save changes</button>
</div>
</div>

Answer 1

You could make a function in your component which opens the modal like this:
...
export class AppComponent {
#ViewChild('smModal') smModal;
currentItem;
...
openModal(item: any) {
this.currentItem = item;
this.smModal.show();
}
}
Then instead of smModal.show() you can call openModal(item). In the modal, you can then access {{ currentItem }} the same way you access item in the table.