Apply Mat-Tootip to Mat-table cell generated using *matRowDef

Haq

New Member
#1
Currently I am using some data to create and populate a table dynamically. The number of columns remains consistent but the number of rows changes depending on the data. There is one column in the table that shows a number. I want to add a tool tip that shows on hover, which is extra data related to the data in that row so in the data it's in the same object however, I do not know how to access the individual cells as all of the rows are dynamically generated.

HTML:
Mã:
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort style="font-size: 4px">
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef  mat-sort-header> {{column.value}} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
</ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
Columns:
Mã:
  columnNames = [{
    id: "id",
    value: "ID"

  }, {
    id: "ss",
    value: "SS"
  },
    {
      id: "cd",
      value: "CD"
    },
    {
      id: "type",
      value: "Type"
    }, {
      id: "type2",
      value: "Secondary Type"
    },
    {
      id: "motion",
      value: "Motion"
    },{
      id: "quantity",
      value: "Quantity"
    },{
      id: "in",
      value: "In"
    },{
      id: "error",
      value: "Error Code"
    }];
Example Data:
Mã:
  {
    "id": 1,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "603",
    "error_nm": "Description for Error 603"
  },
    {
    "id": 2,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "605",
    "error_nm": "Description for Error 605"
  }
so when I hover over each cell for the column of error code I want to show a tool tip with the description for the code which is provided in error_nm.

How can I apply a tool-tip to each cell in the error column which will pull the error code description from the same object as that error in dataSource?
 
Top