Angular Material- Getting id from clicked row element

Question

I want to get row id and clicked element id when clicking on the button in the Angular Material table...

I got clicked element id but the row's id is not getting it shows undefined. How to get the id in the component?

HTML

<table     mat-table [dataSource]="dataSource" matSort matTableResponsive>

  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row let i=index;"> {{ i+1}} 

    </td>
  </ng-container>



  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
    <td mat-cell *matCellDef="let row"> {{row.amount}} </td>
  </ng-container>
  <ng-container matColumnDef="discount">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Discount </th>
    <td mat-cell *matCellDef="let row"> {{row.discount}} </td>
  </ng-container>
  <ng-container matColumnDef="total">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Total </th>
    <td mat-cell *matCellDef="let row"> {{row.total}} </td>
  </ng-container>
  <ng-container matColumnDef="orderStatus">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Change Status</th>
    <td mat-cell *matCellDef="let row"> 

      <button mat-button color="accent" [matMenuTriggerFor]="menustatus"> {{row.orderProcess.orderStatus}}</button></td> 

    <mat-menu  #menustatus="matMenu">
      <button  (click)="changestatus($event,row)" mat-menu-item [value]="os.id" *ngFor="let os of orderprocessing">{{os.name}}</button>

    </mat-menu>
  </ng-container> 

</table>

in the last column, I get the menu from API like this ordered,shipped and so on...

Component

changestatus(e:any,row:any)
{
  console.log(e.target.value);
  console.log(row);
}

In my second console, I get undefined.

How to get the id in the single onclick function?

Answer 1

Suspect from the above HTML code, look like you close </td> after the mat-button element.

Hence, the row value is not accessible for the <mat-menu> button as it is not within the <td> scope.

<td mat-cell *matCellDef="let row"> 
                  
    <button mat-button color="accent" [matMenuTriggerFor]="menustatus"> {{row.orderProcess.orderStatus}}</button>
</td> 
              
    <mat-menu  #menustatus="matMenu">
        <button  (click)="changestatus($event,row)" mat-menu-item [value]="os.id" *ngFor="let os of orderprocessing">{{os.name}}</button>
               
   </mat-menu>

---

Solution

Place <mat-menu> element within the <td> element.

<td mat-cell *matCellDef="let row">
  <button mat-button color="accent" [matMenuTriggerFor]="menustatus">
    {{row.orderProcess.orderStatus}}
  </button>

  <mat-menu #menustatus="matMenu">
    <button
      (click)="changestatus($event,row)"
      mat-menu-item
      [value]="os.id"
      *ngFor="let os of orderprocessing"
    >
      {{os.name}}
    </button>
  </mat-menu>
</td>

Sample Demo on StackBlitz