CODEWITHSUNDEEP
htmlangular
Dan O'Leary
Dan O'Leary

Reputation: 2822

Angular 2 Make entire row clickable

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>

Upvotes: 4

Views: 10747

Answers (2)

Bahman Rouhani
Bahman Rouhani

Reputation: 1259

set the padding for the <tr> to 0. this way the <td> elements would fill the rows, hence making the whole cell clickable.
note that depending on your css file this might be a bit more difficult. but the solution is basically to make your data cover your rows.

Upvotes: 0

Wesley Coetzee
Wesley Coetzee

Reputation: 4838

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

Upvotes: 8

Related Questions