Selectable Table Rows and Passing Selection Info to new Component

I´have an Angular 4 component with a table as the code below shows. I would like to have every row clickable to open a angular2-modal https://github.com/shlomiassaf/angular2-modal with detail information to the selected row (clinic). I´m new to angular and I do not know how to pass the information wich row (clinic) is clicked to the presumably new component and how to make those rows clickable in the first place. A bonus would be a pretty hover effect in 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>