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
-
Please include a minimum reproducible example in the question, instead of in a linkmousetail– mousetail2021-10-02 07:39:58 +00:00Commented Oct 2, 2021 at 7:39
Add a comment
|
2 Answers
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>
Comments
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
3 Comments
Sanjana
I want the htmlcontent just like HTMLTableCellElement {tagName: "td", attributes: {…}, innerHTML: "1", nodeType: 1…} attributes: Object class: "mat-cell cdk-column-position mat-column-position" id: "1" mat-cell: "" role: "gridcell" _ngcontent-imd-c1: "" proto: Object innerHTML: "1" nodeType: 1 tagName: "td"
Sarath Mohandas
@Sanjana, please check and confirm
Sarath Mohandas
edited the viewhtmlData(){}