I attached an image to can exemplify the problem. I have 4 elements in page:

• a table (which is an header with some data)
• a chart
• a table under the chart (which use chart labels as table header)
• a footer

Because first table have only 2 rows (and is static), tableChart also is static (with only 5 rows) and the footer have only one row, I want to calculate dynamically the height of the chart.

So, I get window.height (or container) and decrease table height, tableChart height and footer height. Then, assign the value to chart element. I do this inside AfterViewInit lifecycle (I tried also DoCheck), but can't solve a problem: because #chart element is rendering in same time with the rest, when I get #chartTable height inside setChartHeight() method, it get only a part of total height necessary to render all 5 rows, so the chart will have a bigger height than the necessary.

To be more specific:

• chartTable have an normal height of 100px;
• because the setChartHeight() is called too early, chartTable is found having only 20px (I think can render only first row)
• so, from the total of 500px (example) will decrease only 20px, instead of 100px and the chart height will be 480px (instead of 400px)

How can I wait to render all elements out of chart, and just at the final, to calculate the height of it in a right mode.

ngAfterViewInit(): void {
   this.setChartHeight();
}

setChartHeight(): void {
  let container = document.getElementById('container');
  if (typeof container == 'undefined' || container == null) {
    return;
  }

  let table = document.getElementById('table');
  let chartTable = document.getElementById('chartTable');
  let footer = document.getElementById('footer');

  const height = container.clientHeight - table.clientHeight - chartTable.clientHeight - 
  footer.clientHeight;

  let chart = document.getElementById('chart');
  chart.style.height = height + 'px';
}

Another problem which I think exists is that chart and chartTable have same data source. So, when the source will came, because the chart element is above chartTable element, it will be rendered first. So, I need to render chartonly when I'm sure thatchartTable` is already displayed on the page.

edit: codesandbox example

thanks