How to add onClick event for rows on Angular Mat-Table then go to a different page?

Question

My question is on how to add click event on a specific row and go to next form carrying the values of the clicked row. I'm a bit confused now

        <!-- Position Column -->
        <ng-container matColumnDef="itemname">
            <th mat-header-cell *matHeaderCellDef> ITEM NAME </th>
            <td mat-cell *matCellDef="let element"> {{element.itemname}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="category">
            <th mat-header-cell *matHeaderCellDef> CATEGORY </th>
            <td mat-cell *matCellDef="let element"> {{element.category}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="quantity">
            <th mat-header-cell *matHeaderCellDef> QUANTITY </th>
            <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
        </ng-container> 
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="rows" mat-row *matRowDef="let row; columns: 
         displayedColumns;"> 
        </tr>
        </table>

Answer 1

Try sending the value onClick like this.

<ng-container matColumnDef="itemname">
     <th mat-header-cell *matHeaderCellDef> ITEM NAME </th>
     <td mat-cell *matCellDef="let element">
          <ng-container ng-click="passValue(element.itemname)"> 
          {{element.itemname}} 
          </ng-container> 
     </td>
</ng-container>

And catch the value in js code as

  clickedValue:any;
  passValue(val:any){
      this.clickedValue = val;
      console.log(clickedVal);
  }

and then you can use the value , in any other form. Please ask for any clarification.