I have a table in my Angular 4 component where each row represents a clinic. I want to make each row clickable so that when clicked, it opens an angular2-modal from https://github.com/shlomiassaf/angular2-modal displaying detailed information about the selected clinic. I am new to Angular and unsure of how to pass the clicked row's information to the new component and how to enable clickable rows in the first place. Additionally, it would be nice to add a stylish hover effect to the table.
<tbody *ngIf="!isEditing">
<tr *ngFor="let clinic of clinics">
<td><b>{{clinic.clinicCode}}</b><br>
<font size="-2">Last Update: <br>
{{clinic.lastUpdate | date:'yyyy-MM-dd hh:mm a' : 'UTC' }}</font></td>
<td>{{clinic.clinicName}}</td>
<td>{{clinic.street}}</td>
<td>{{clinic.zip}}</td>
<td>{{clinic.town}}</td>
<td>{{clinic.countryCode}}</td>
<td>
<button class="btn btn-sm btn-warning" (click)="enableEditing(clinic)"><i class="fa fa-pencil"></i> Edit</button>
<button class="btn btn-sm btn-danger" (click)="deleteClinic(clinic)"><i class="fa fa-trash"></i> Delete</button>
</td>
</tr>
</tbody>