Getting id of clicked element with clicked row id in angular

i want to get row id and clicked element id when click on button in angular material table…
i got clicked element id but roe id is not getting it shows undefined how to get both id into component.ts file

my html code is

<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 last column i get menu from api like this ordered,shipped as so on..

this is my component.ts file

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

in my second console there is error like undefined

how to get both id in single onchange function

>Solution :

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