如何获取当前行 HTML 表格单元格元素？

Question

I have a angular material table. If I click one row, i wanted to fetch the HTMLTableCellElement of the selected row . I tried using viewChild but the problem is i am getting whole table html element. Expected output Below is my code. Please Help me to acheive this scenario ! https://stackblitz.com/edit/angular-material-table-data-source-nym2vx?file=app/app.component.html

Answer 1

In your example when you click on the a tag you can also send that tag to your function:

  <mat-cell *matCellDef="let element" id="{{ element.position }}">
    <a href="javascript:;" (click)="viewhtmlData($event.target)">{{
      element.name
    }}</a>
  </mat-cell>

Then, inside your function you can get the parent of that a tag which is the mat-cell containing it, like so:

  viewhtmlData(aTag: HTMLElement) {
    console.log('Selected Row HtML data', aTag.parentElement);
  }

  <!-- CONSOLE OUTPUT -->
  <mat-cell _ngcontent-c69="" class="mat-cell cdk-column-name mat-column-name" role="gridcell" id="3">
    <a _ngcontent-c69="" href="javascript:;">Lithium</a>
  </mat-cell>

Answer 2

There are two changes you can make from the sample you have provided.

Change: 1 (in.html side) Pass event via the function: viewhtmlData()

  <a href="javascript:;" (click)="viewhtmlData()">{{ element.name }}</a>

to

 <a href="javascript:;" (click)="viewhtmlData(element)">{{ element.name }}</a>

Change 2:(in.ts side) Pass the element through the function

// This function will show entire table contents
  viewhtmlData() {
    console.log('Selected Row HtML data',this.table);
  }

to

// The element data from  .html is passed through the function
  viewhtmlData($event) {
    console.log('Selected Row HtML data',$event);
    this.selectedElement =$event;
    var Row = document.getElementById($event.position)  as HTMLTableCellElement;    
    this.selectedCellHtml = Row;
   
    console.log('Selected Row HtML data',this.selectedCellHtml);
    
  }

For further reference, you can go through the below sample: https://stackblitz.com/edit/angular-material-table-data-source-gpybg5?file=app%2Fapp.component.ts