1

I have a mat-table in which I have to put a hyperlink on each column value of the table and pass the id value to the API. For that I tried wrapping the column value inside tag but that didn't work . <mat-header-cell *matHeaderCellDef mat-sort-header> ID <mat-cell *matCellDef="let row">{{row.projectId}} I then tried to test using a button in that place and passing the id on (click) event and it worked . But i want it to be be hyperlink tag , not a button .

 <ng-container matColumnDef="Id">
                <mat-header-cell *matHeaderCellDef mat-sort-header>
                    ID
                </mat-header-cell>
                <mat-cell *matCellDef="let row"><button (click)="sendCall(row.Id)">{{row.Id}}</button> </mat-cell>
            </ng-container>

But I want it to look something like this and be able to pass the value on click - Can anyone please help on this ?

angular_code
  • 319
  • 3
  • 18

1 Answers1

1

Why'd you need the click event handler in the <a> tag? You could just bind to href attribute.

Try the following

<a href="/someRoute/{{row.Id}}">{{row.rowId}}</a>
angular_code
  • 319
  • 3
  • 18
ruth
  • 29,535
  • 4
  • 30
  • 57
  • Because i need to pass that ID to an API to fetch data for each row clicked . I dont have to open a link or something , href opens a new link . – angular_code Feb 25 '21 at 11:02
  • Then I'd say anchor tag is not the right choice. You can use ` – ruth Feb 25 '21 at 11:05
  • This looks better . thanks – angular_code Feb 25 '21 at 11:07