CODEWITHSUNDEEP
angular
jm123456
jm123456

Reputation: 625

How can I access MatTableDataSource elements in the TR of a mat-table?

I have a table that is using a datasource, and I want to pull out a particular element of each row of the datasource so that I can build a link to route to when the user clicks the row. But I'm not sure how to access it.

  <table mat-table [dataSource]="tokenData" class="w-full ">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <img src="https://bscscan.com{{element.position}}"/>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="'page/{{row.position}}'"></tr>
  </table>

The [routerLink]="'page/{{row.position}}'" doesn't work, how can I access the element from the ?

Upvotes: 0

Views: 809

Answers (1)

Xavier Brassoud
Xavier Brassoud

Reputation: 717

You are mixing value inside the one-way bindable property routerLink. You can not use syntax {{}} when the property is surround by [].

You can achieve like this :

[routerLink]="'page/' + row.position"

Or as Andrei suggest:

routerLink="page/{{row.position}}"

Upvotes: 1

Related Questions