Get initial height/width of canvas in <ion-content>

Question

I have a IONIC4/Angular8 setup with a header and splitpane-Menu. Then I load BabylonJS engine into the View-Child of the #canvas inside <ion-content>.

For that reason I need to set the height and width of the canvas correctly. Using window.innerHeight/window.innerWidth will always include the menu and the header.

I have a working window-resize Eventlistener but the first initial BabylonJS view always gets distorted.

My question is, how can i dynamically get the width and height of just the canvas? canvas.nativeElement.clientHeight was my assumption - but i always received a 0.

Any hints?

UPDATE

I tried the suggested solution of answer of @rtpHarry - here are my results:

You can see my content canvas at (1) and my menu at (2). If you look at the outputs in the console (3) is showing the correct height of the canvas but the width still includes the menu. This is further highlighted if you compare (3) to (4) where i outputted the window.innerwidth. The header gets deducted but the menu does not.

These is the stuff i use...

Answer 1

The trick you're looking for is to find the size of the ion-content, which can be done using the following:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { IonContent } from '@ionic/angular';

export class HomePage implements OnInit {
  @ViewChild(IonContent, { static: true }) private content: IonContent;

  constructor() { }

  ngOnInit() {
    this.content.getScrollElement().then(scrollElement => {
      console.log("clientHeight: ", scrollElement.clientHeight);
      console.log("clientWidth: ", scrollElement.clientWidth);
      console.log("scrollHeight: ", scrollElement.scrollHeight);
      console.log("scrollWidth: ", scrollElement.scrollWidth);
    });
  }
}

Client width and height are your width and height of the ion-content.

If the content was longer than the current page and you had scrollbars, the scroll width and height would be set to those values.

This is the output I'm getting, which I confirmed with devtools:

You can't make ngOnInit async but depending on where you are doing this you could do an async version like:

  async someOtherFunction() {
    const scrollElement = await this.content.getScrollElement();
    console.log("clientHeight: ", scrollElement.clientHeight);
    console.log("clientWidth: ", scrollElement.clientWidth);
    console.log("scrollHeight: ", scrollElement.scrollHeight);
    console.log("scrollWidth: ", scrollElement.scrollWidth);
  }

Update

I tested it with a dashboard I'm building at the moment and it does give me the correct ion-content's dimensions:

I added a button (1) and it outputs (2) and checking it against the splitpane (3) it matches up apart from some sub-pixel rounding.

Do you have other stuff on the page that is overflowing and affecting it? Because I actually was seeing some discrepancy at first with an ng-datatable component on there, but when I commented it out and just left the basics the numbers matched up.