Selectable Table Rows and Passing Selection Info to new Component

Question

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 which 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>

Answer 1

Beginning with the bonus, the easyest:

CSS:

td:hover{
   background-color:red;
   color:white
}

HTML

1.Change the button markup as this:

<button class="btn btn-sm btn-warning" (click)="enableEditing(clinic)"><i class="fa fa-pencil"></i> Edit</button>

So you can get 'clicnic' object inside enableEditing().

2.You can also get the id for each one by

<tr *ngFor="let clinic of clinics; let i=index">

where i is the index indeed. And you can do

<button class="btn btn-sm btn-warning" (click)="doSomething(i)"><i class="fa fa-pencil"></i> Edit</button>  

Typescript

doSomething(id){
   console.log(clinics[id]);
}

And in the new component you will need @Input to get the 'clinic' object/information.