0

I am dynamically rendering a material angular table, and i'd like to make a row of cell (rendered via names) clickable. I don't want to add a button, just make the name that's rendered clickable.

For example, I have a if check (*ngIf="arr.data === 'id'") then render an icon next to the id such as image below.

enter image description here

I am rendering the eclipse via the if check next to the id 54. How can I make the the id clickable w/o rendering an icon inside angular material table?

Generaldeep
  • 437
  • 2
  • 12
  • 30

1 Answers1

1

You could do something like this:

<ng-container matColumnDef="account.accountCode">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Code </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <a href="" [routerLink]="['/accounts', row.account.accountKey]"> {{row.account.accountCode}} </a>
  </mat-cell>
</ng-container>

This adds an anchor tag within the cell that you can click on. In this sample, routerLink is used for navigation.

Of course, you will want to change the names, and route information.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
  • Downvoted because this doesn't wrap the whole cell, only the {{row.account.accountCode}} –  Jun 03 '20 at 15:22
  • @ILovePHP Wow. Not sure that is a good reason to down-vote, but whatever. The OP does say *just make the name that's rendered clickable* after all. – R. Richards Jun 03 '20 at 15:58
  • it seems like i read too quickly and downvoted without reading what OP asked. I will undo the downvote. Thanks for bringing it to my attention! –  Jun 03 '20 at 16:00