Как отправить содержимое таблицы данных из одного компонента в другой компонент?

Question

У меня есть один компонент, где я заполняю таблицу данных информацией. Материальная карта выглядит так:

Я хочу поместить точно такую ​​же информацию в другой компонент. Все работает, кроме таблицы данных. И я не совсем уверен, как решить эту проблему. Следуя тому, как это выглядит на данный момент:

После некоторого кода:

TS для компонента, куда должна идти информация. Мне нужно использовать источник данных, я думаю, так как я использую его для другого компонента. Я использую @Input, чтобы получить блок, который был отправлен из другого компонента. Но как поместить все транзакции в ELEMENT_DATA, чтобы он отображался в таблице?

export class BlockCardComponent implements OnInit {

  displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);


  @Input() block: Block;
}

Биты HTML этого компонента: на данный момент я просто делаю это так.

 <mat-card-content>
    <p>{{block.transactions | json}}</p>
  </mat-card-content>

TS компонента, откуда поступает информация:

export class MinerViewComponent implements OnDestroy, OnInit {
  transaction: Transaction;
  displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);
  temp: Transaction[] = [];
  blockNumber = 1;
  previousHash = '00000000000000000000000000000000';
  blockHash: string = this.generateFirstHash();
  blockHashList: string[] = [];

  message: any;
  subscription: Subscription;

  constructor(private _TS: TransactionPoolToMinerService, private ref: ChangeDetectorRef,
              private toolbarToMVService: ToolbarToMVService, private _MS: MinerViewToBlockchainService) {
    this.subscription = this.toolbarToMVService.getMessage().subscribe(message => {
      this.message = message;
      this.sendBlockToBC();
      this.clearBlock();
    });
  }
sendBlockToBC() {
    const block = new Block(this.blockNumber, this.temp, this.previousHash, this.blockHash);
    this._MS.emitTransaction(block);
    console.log(block);
    this.dataSource = undefined; // to empty the table in the miner view component
    this.dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA); // create new datasource to fill the table,
    // since the old one gives an error
    this.generateBlockHash();
    this.raiseBlockNumber();
  }
}

HTML этого компонента для таблицы данных:

 <mat-card-content>

    <div>
      <table mat-table [dataSource]="dataSource" class="example-container mat-elevation-z8">
        <ng-container matColumnDef="sender">
          <th mat-header-cell *matHeaderCellDef> Sender </th>
          <td mat-cell *matCellDef="let element"> {{element.sender}} </td>
        </ng-container>

        <ng-container matColumnDef="recipient">
          <th mat-header-cell *matHeaderCellDef> Empfänger </th>
          <td mat-cell *matCellDef="let element"> {{element.recipient}} </td>
        </ng-container>

        <ng-container matColumnDef="amount">
          <th mat-header-cell *matHeaderCellDef> Betrag </th>
          <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
        </ng-container>

        <ng-container matColumnDef="fee">
          <th mat-header-cell *matHeaderCellDef> Gebühr </th>
          <td mat-cell *matCellDef="let element"> {{element.fee}} </td>
        </ng-container>

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

  </mat-card-content>