Angular Material table select row but more data needed

Question

I have a material table that having an array as datasource. But from what I experienced, if we select a row and within this row variable only contains data that being displayed on the table, what if I need to select the specific index of object from the array and pass to other screen? Can I select more than row variable? Thanks

in a mat-table, you choose the displayed columns, but the data source can store more variables than columns. More, you can use `` see https://stackoverflow.com/questions/60990643/expand-and-collapse-row-on-button-click-which-is-in-a-td-in-mat-table-row/61008649#61008649 (in this SO is for expanded a row, but you can use for anything), or you can use `` to get the index, see https://stackoverflow.com/questions/50292349/get-index-of-row-in-angular-material-table-v5 — Eliseo, Apr 27 '20 at 08:27
Hi, thanks for the answer, but seems like that 2 links not really helping because they are still passing row, I want the datasource itself to be pass. Let say index 2 object in datasource is selected, I want this whole index 2 objected selected and pass to a function, not the the row info — kiki, Apr 27 '20 at 08:37

score 0 · Accepted Answer · answered Apr 27 '20 at 08:57

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.

Angular Material table select row but more data needed

1 Answers1