En su ejemplo, cuando hace clic en una etiqueta, también puede enviar esa etiqueta a su función:

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

Luego, dentro de su función, puede obtener el elemento principal de esa etiqueta, que es la celda mat que lo contiene, así:

 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>

Hay dos cambios que puede hacer a partir de la muestra que ha proporcionado.

Cambio: 1 (en el lado .html) Pase el evento a través de la función: viewhtmlData()

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

a

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

Cambio 2: (en el lado .ts) Pase el elemento a través de la función

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

a

 // 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); }

Para obtener más información, puede consultar el siguiente ejemplo: https://stackblitz.com/edit/angular-material-table-data-source-gpybg5?file=app%2Fapp.component.ts