Issue
I have this page like image below:
- The filter has a dynamic width and is an external angular component
- the table is inside the "parent" component
FYI:
- The table component has a
[height]="something"
that accepts either string or number as parameters. - The table is a pivot table using a custom component called Dev-Extreme
All i want is to assign a value inside the [height]=""
in the HTML component page that is dynamic so that the height of the table resizes based on how much space there is left in the page.
Could also use TypeScript to do that and maybe calculate the height each components takes in the page except the table and do calculations on that.
Can anyone help me here, i've been stuck on this for two hours.
Solution
I found a solution to this here's what i did:
Creating a @ViewChild()
to gather the div element in my .ts
:
@ViewChild('pivotFilter', { static: false }) stickyHeader?: ElementRef;
Here:
- The
div
has anid="pivotFilter"
- Using ViewChild we can get the HTML element
Declaring getter to calculate table height:
get filterHeight() { return window.innerHeight - (this.stickyHeader?.nativeElement.offsetHeight + 88); }
Here:
window.innerHeight
is the height of the pagethis.stickyHeader?.nativeElement.offsetHeight
is the height of my component- That
+ 88
is the rest of the page height (the title, and the space between filter and table)
I had to run change detection on content initialization to prevent errors like so:
ngAfterContentInit(): void {
this.cd.detectChanges();
}
Then i just applied the height to the html page. Hope this helps someone, cheers !
Answered By - devludo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.