CODEWITHSUNDEEP
angulardatatableangular-material2
Sithys
Sithys

Reputation: 3793

Get objectId from row in angular 4 material data-table

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.

Upvotes: 0

Views: 4085

Answers (1)

Emmy
Emmy

Reputation: 3743

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.

Upvotes: 3

Related Questions