Sending an Id to a method on a button click in Material Table in Angular

Question

I have the following Material Table Code for "Action" is as given below:

    <ng-container matColumnDef="Action">
      <th mat-header-cell *matHeaderCellDef> Action</th>
        <td mat-cell *matCellDef="let element">
          <i class="material-icons mat-icon-button" (click)="greeting(element)">open_in_new</i> </td>
  </ng-container>

Every row of this table has an associated Special_Id in the database which I am getting, through a GET REST call, along with all this data but not showing in the UI and hence that's not a part of the column of this material table.

Code for the interface is as follows:

export interface PeriodicElement {
  special_id:string;
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

code for the column of Material table:

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','Action'];

On click of the Action Button corresponding to every row, a method greeting(element) is called. My challenge is to pass the Special_Id as parameter to method 'greeting'. How can I achieve that? AngularJS is quite new to me and I am not able to figure out how to do that.

score 2 · Answer 1 · answered May 25 '20 at 14:54

Did you try:

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element">
    <i class="material-icons mat-icon-button" 
       (click)="greeting(element.special_id)">
      open_in_new
    </i> 
  </td>
</ng-container>

You can also set the link on the row

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element" (click)="greeting(element.special_id)">
    <i class="material-icons mat-icon-button">
      open_in_new
    </i> 
  </td>
</ng-container>

score -1 · Accepted Answer · answered May 25 '20 at 14:53

-1

Even though special_id is not part of the array for columns, your element is the object having that field. So you can directly pass it as the argument and your id would be passed to the method. Simply call greeting(element.special_id)

answered May 25 '20 at 14:53

Minal Shah

1,402
1
5
13

Sending an Id to a method on a button click in Material Table in Angular

2 Answers2