Angular Material table select row but more data needed

You can do it like this.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  selectedRow(row) {
    console.log('selectedRow', row)
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  age: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', age: 20},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', age: 20},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', age: 20},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', age: 20},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B', age: 20},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', age: 20},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', age: 20},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', age: 20},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', age: 20},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', age: 20},
];

app.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

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

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

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

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

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

Notice - in object I am getting 5 property while in table showing only 4. Once you will click on any row in table in selectedRow() method you can get complete object of that row.

Working Demo

click on any row and check console, you will get data.

Let me know if you still have any issue.