Issue
I am using angular material table v11.1.0 having a main row with expand rows on it, that main row would be sticky once you expanded the row and as well as when you scroll the table.
I would like to achieve it like, when we scroll the table, once the expand rows scrolled past the table then we need to remove that sticky from main row. I am trying to find the scroll position to find the expand row to identify it, but no luck. if any help would be appreciated.
My example is here stackblitz
Solution
First of all you have to detect the scroll event for it, so you can achieve it by adding scroll event to div
<div class="example-container mat-elevation-z0" (scroll)="onScroll($event)">
and then you have to get the element for which you want to check its position according to view port.
(click)="expandeElment(element, $event.target)"
in the ts files you first have define the method OnScroll for the one mentioned in the template.
onScroll(event){
console.log(this.getElementViewportInfo(this.expandedElem))
}
then we have to get the html element/row for which we will be targeting in scroll
expandeElment(data, element){
this.expandedElement = data;
this.expandedElem = element;
console.log(this.getElementViewportInfo(this.expandedElem))
}
in the end we have to add method to get the element view port info
getElementViewportInfo(el) {
const box = el.getBoundingClientRect();
return box.top < window.innerHeight && box.bottom >= 0;
}
for now I am just console logging the info, if the element is on screen or not, you can further modify according to your changes.
Note: solution can be accessed here
Answered By - YOusaFZai
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.