title: Displaying row data from Angular Material Table into another component
body: <p>I have two components. The first component contains Angular Material Table while the second one going to display the details of the row clicked in table.</p>
  
  <p>The first component:</p>
  
  <pre><code>    const ELEMENT_DATA: GoodsList[] = [
      {initial: 'J', eta: '20-01-2020', src: 'IN'},
      {initial: 'N', eta: '20-01-2020', src: 'ON''}
  ]
  &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
      &lt;ng-container matColumnDef="ordered"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Initial &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.initial}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="eta"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; ETA &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.eta}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="srt"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; SRC &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.src}} &lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now the function getRecord() is working as intended.</p>
  
  <pre><code>    getRecord(row: GoodsList){
      console.log(row);
      }
  </code></pre>
  
  <p>The data is captured inside row variable but now how can I pass it into another component based on what I clicked?</p>