How to get the each cell data after entering into the cell of the dynamic columns/rows mat-table in angular8?

Viewed 375

I want to add tooltip and validation for each cell of the mat-table. so once user entered the data into the cell, have to show the tooltip for that cell data . the tooltip text will be combination of [column-name and data] . How to get column name and data after mouse hover/entered ?

Html of the dynamic table code is like -

<div  class="row" *ngIf="displayedColumns.length > 0" class="mat-elevation-z8">
    <div class="table-container">
    <table class="table"  mat-table [dataSource]="dataSource">

        <tr mat-header-row *cdkHeaderRowDef="displayedColumns; sticky:true" ></tr>
        <tr mat-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" [cdkColumnDef]="disCol">
            <div *ngIf="disCol != 'addrow'">

                <th mat-header-cell *cdkHeaderCellDef>{{disCol}}</th>

                <td mat-cell (mouseover)="getData(element.get([disCol]))" 
                matTooltip={{dataFromService}} style="font-size: 18px !important;" *cdkCellDef="let element "> 
                    <div *ngIf="disCol != 'STATUS' ">
                      <input id="paste-me" (keyup.enter)="onEnter()" [formControl]="element.get([disCol])">
                    </div>
                    <div *ngIf="disCol == 'STATUS' ">
                    <mat-select [formControl]="element.get([disCol])">
                      <mat-option [value]="active" *ngFor="let active of activeList">
                        {{ active }}
                      </mat-option>
                    </mat-select>
                    </div>
                </td>


            </div>

               <div *ngIf="disCol == 'addrow'">
                <th mat-header-cell *cdkHeaderCellDef ></th>
           <div *ngIf="dynamicRows.length > 0 ? true : false">

          <td mat-cell style="width: 120px;" *cdkCellDef="let element; let i = index;"> 
            <input  [(ngModel)]="inputValue" placeholder="No.of Rows" *ngIf="i > dynamicRows.length - 1 ? true : false" (keyup.enter)="addnewRow()"/>
          </td>

           </div>

         <div *ngIf="dynamicRows.length === 0 ? true : false"> 

          <td mat-cell style="width: 120px;" *cdkCellDef="let element;" >
            <input [(ngModel)]="inputValue"    placeholder="No.of Rows" *ngIf="dynamicRows.length === 0 ? true : false" (keyup.enter)="addnewRow()"/>
          </td>
         </div>
               </div>
        </ng-container>

    </table>
    </div>
------
    getData(data){

    this.dataFromService = 'value';
       }

i need to align the column name and data .

How to get those data? Could you please help?

1 Answers

You can use [matTooltip] to call the function for the dynamic data:

<td mat-cell *matCellDef="let row" [matTooltip]="getTooltip(column, row)">{{row[column]}}</td>

Then in your component code, you can use the column and row data to return the tooltip data however you need:

getTooltip(column, row) {
  return column + ' - ' + row[column];
}

A simple example here: https://stackblitz.com/edit/material-table-dynamic-tooltip?embed=1&file=app/app.html

Related