Angular 2 Make entire row clickable

Question

I want to make each row of a table clickable in Angular 2. However, only the parts of the cell that contain data are clickable. i.e. if one cell contains more data than another, and so has a greater height, the empty bit of the smaller cell is not clickable.

For example, in the page below the first cell is only clickable on the line containing the name, whereas the entirety of the second cell is clickable

<table>
    <thead></thead>
    <tbody>
        <tr *ngFor="let item of items" routerLink="/otherpage/{{item.Id}}">
           <td>{{item.name}}</td>
           <td>
              <ul>
                 <li *ngFor="let detail of item.details">
                    {{detail}}
                 </li>
              </ul>
           </td>
        </tr>
    </tbody>
</table>

Answer 1

I've fixed the routerLink code for you.

<table>
  <thead></thead>
  <tbody>
      <tr class="clickable" *ngFor="let item of items" [routerLink]="['/otherpage/', item.Id]">
         <td>{{item.name}}</td>
         <td>
            <ul>
               <li *ngFor="let detail of item.details">
                  {{detail}}
               </li>
            </ul>
         </td>
      </tr>
  </tbody>
</table>

You need to add CSS for the animation.

clickable {
  cursor: pointer;
}

This will make the entire <tr></tr> clickable with the cursor animation