How to pass data of table row from one component to another component

Question

I have using mat-table(Angular Materials) on my one component and after clicking on particular row that data in TR should be displayed to another component. Entire information is in "row" parameter

And how I can print it on my new component page.

I had tried many ways to do this, but not able to print in another component.

My first Component HTML

<section class="example-container mat-elevation-z8" tabindex="0" >
        <table mat-table [dataSource]="tiffinMenu1">

          <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef> ITEM </th>
            <td mat-cell matRipple *matCellDef="let tiffinOne" ngDefaultControl > {{tiffinOne.item}} </td> //THIS IS THE DATA TO BE PRINTED ON ANOTHER COMPONENT AFTER CLICK ///
          </ng-container>

          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef> PRICE </th>
            <td mat-cell *matCellDef="let tiffinOne"> {{tiffinOne.price}} </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        </table>
      </section> 

this is my Second component HTML

<div class="split right">
    <div class="centered">
        <p>Token Number: 02</p>
    </div>

    <p>Working:</p>

// here want to display {{tiffinOne.item}} & {{tiffinOne.price}} which is from another component

    <button>Print</button>
    <button>Cancel</button>
</div>

Answer 1

There are several ways to share data between components in Angular. One way is to use a service to store the data and inject the service into both components.

Here's an example of how you can do this:

Create a service to store the data:

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  constructor() { }

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

Inject the service into both components and set the data in the first component:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-first-component',
  template: `
    <section class="example-container mat-elevation-z8" tabindex="0" >
      <table mat-table [dataSource]="tiffinMenu1">

        <ng-container matColumnDef="item">
          <th mat-header-cell *matHeaderCellDef> ITEM </th>
          <td mat-cell matRipple *matCellDef="let tiffinOne" ngDefaultControl > {{tiffinOne.item}} </td>
        </ng-container>

        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef> PRICE </th>
          <td mat-cell *matCellDef="let tiffinOne"> {{tiffinOne.price}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="setData(row)"></tr>

      </table>
    </section> 
  `,
  styleUrls: ['./first-component.component.css']
})
export class FirstComponent implements OnInit {
  displayedColumns: string[] = ['item', 'price'];
  tiffinMenu1 = [    {item: 'Tiffin One', price: '10'},    {item: 'Tiffin Two', price: '20'},    {item: 'Tiffin Three', price: '30'}  ];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
  }

  setData(data: any) {
    this.dataService.setData(data);
  }
}

In the second component, get the data from the service and display it:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-second-component',
  template: `
    <div class="split right">
      <div class="centered">
          <p>Token Number: 02</p>
      </div>

      <p>Working:</p>

      <p>{{ data?.item }}</p>

I hope this helps!

Answer 2

I think it can be achieved this way:

1. Add a click event handler to <tr mat-row... and pass current row (let row) to this handler
2. In this handler store the clicked row in a component's public field like this.selectedRow = row
3. Bind your second component to selectedRow