Pass data row from mat-table when click to another component in Angular 7

Question

I want to pass full row to other component for display this data, any body have a way to do it.

Html:

    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row>

ts:

  //Get row data when the click
  getRecord(row){
      // Do somthing ..... //
  }

I will searched a lot, i can't find way.

Answer 1

I solved my problem this steps after click on the row:

1. Save the data in variable in the service file.
2. use navigate for routing.
3. get the data from the variable in the service file.

   public  getRecord(row : any){
    console.log(row);
     this.userservice.dataRow = row;
     this.router.navigate(['/profile']);
  }

Service file:

    //Temporarily stores row data from mat-table
    dataRow:any;

profile.ts:

    this.dataRow = this.userservice.dataRow;