I have this page like image below:
[![table](https://i.stack.imgur.com/nrRZJ.png)](https://i.stack.imgur.com/nrRZJ.png)

* 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](https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/SimpleArray/Angular/Light/)

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.