How to make a table row behave as a hyperlink in Angular 2

Question

I have a table row that, when clicked, takes the user to a new page:

<tr routerLink="/users/{{user.id}}">
  <!-- ... a bunch of cells with user name, etc -->
</tr>

That works fine, but as it's not an actual HTML link, it doesn't behave entirely like one in the browser (e.g. there's no option to open the link in a new tab).

I tried wrapping each <td> element in an <a> and removing the link styling with CSS, which behaves like a link but only when the mouse is over the text in the table cell.

Is there another way to get the table row to behave more like a hyperlink?

Answer 1

Try Like This.

You have to pass array params in order to create dynamic routing URL, Your case will work fine in static URL. Please refer "https://angular.io/api/router/RouterLink"

<tbody>
  <tr routerLink="[/user, user.id]">
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  </tr>
</tbody>