Get objectId from row in angular 4 material data-table

Question

i have a data-table, nearly like the example on the material 2 page.

 <div class="example-header">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
    </div>

    <table mat-table class="w100" #table matSort [dataSource]="dataSource">

      <!-- Position Column -->
      <ng-container matColumnDef="branch">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Standort </th>
        <td mat-cell *matCellDef="let item"> {{item.branch}} </td>
      </ng-container>

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

      <!-- Weight Column -->
      <ng-container matColumnDef="costPerMonth">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Kosten (p.M.) </th>
        <td mat-cell *matCellDef="let item"> {{item.costPerMonth}}€ </td>
      </ng-container>

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

      <ng-container matColumnDef="lastVisit">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> letzter Besuch </th>
          <td mat-cell *matCellDef="let item"> {{item.lastVisit | date:'dd.MM.yyyy'}} </td>
        </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row.id)"></tr>
    </table>
      <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true"></mat-paginator>
    </div>

how do i get the objectId from the element when i click a specific row? I need to trigger a click function which includes this id for the next function but i didn't found anything about that here in stackoverflow or in google.

material.angular.io/components/table/overview#selection Have you looked at this ? — Chau Tran
– Chau Tran, Commented May 14, 2018 at 19:56

Emmy · Accepted Answer · 2021-07-02 07:53:53Z

3

I assume with ObjectId you mean a property on your item which is named id. In this case it seems like you already have this functionality in your table.

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row.id)"></tr>

The '(click)' part responds to a click event on one of the rows on your table. If a row is clicked the getRecord(row.id) function will be executed. Here id needs to be a property on the objects you're displaying in your table. So in your case the propertt item.id needs to exist on your items.

You can easily test if this works by putting the function like this in your ts file:

getRecord(rowId: number) {
  console.log(rowId);
}

And check if the right id is printed to your console.

edited Jul 2, 2021 at 7:53

answered May 15, 2018 at 11:53

Emmy

3,7632 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sithys Over a year ago

that doesn't work, (click)="getRecord(row.id) will not return anything because i mapped my object to an interface which doesn't inlcude the id. I solved it by adding id to my interface and set on display: none

Emmy Over a year ago

Well you didn't include that in your question, so I didn't know that.

Anjali Sharma Over a year ago

it should be getRecord(rowId: number) { console.log(rowId); }

Collectives™ on Stack Overflow

Get objectId from row in angular 4 material data-table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related