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
Advertisement
Answer
There are two changes you can make from the sample you have provided.
Change : 1 (in .html side) Pass event via the function : viewhtmlData()
JavaScript
x
2
1
<a href="javascript:;" (click)="viewhtmlData()">{{ element.name }}</a>
2
to
JavaScript
1
2
1
<a href="javascript:;" (click)="viewhtmlData(element)">{{ element.name }}</a>
2
Change 2:(in .ts side) Pass the element through the function
JavaScript
1
5
1
// This function will show entire table contents
2
viewhtmlData() {
3
console.log('Selected Row HtML data',this.table);
4
}
5
to
JavaScript
1
11
11
1
// The element data from .html is passed through the function
2
viewhtmlData($event) {
3
console.log('Selected Row HtML data',$event);
4
this.selectedElement =$event;
5
var Row = document.getElementById($event.position) as HTMLTableCellElement;
6
this.selectedCellHtml = Row;
7
8
console.log('Selected Row HtML data',this.selectedCellHtml);
9
10
}
11
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