javascript - Calling getBoundingClientRect() on element returns object with zero values

Question

I have a simple ionic 5.31.1 / Angular 11.1.0 web app where I place a div (inner div) inside another div (outer div). I want to access the position of the inner div relative to the outer div from the code. Calling getBoundingClientRect() to the inner div returns an object where top, bottom, left, right, x and y are all 0.

Here is the code

app.component.ts

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { DomController } from '@ionic/angular';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements AfterViewInit {

  constructor(
    private readonly platform: Platform,
    private readonly splashScreen: SplashScreen,
    private readonly statusBar: StatusBar, 
    private readonly domCtrl: DomController
  ) {
    this.initializeApp();
  }

  @ViewChild('box') 
  private box: ElementRef;


  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  
  
  async ngAfterViewInit() {
    await this.domCtrl.read(() => {
      console.log(this.box.nativeElement.getBoundingClientRect()); // <-- returns { top: 0, bottom: 0, ... }
    });
  }
}

app.component.html

<ion-app>
  <div class="outer-box">
    <div #box class="inner-box"></div>
  </div>
</ion-app>

app.component.scss

.outer-box {
  background: yellow;
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.inner-box {
  position: relative; 
  background: blue; 
  width: 50px; height: 50px;
}

question from:https://stackoverflow.com/questions/65904968/calling-getboundingclientrect-on-element-returns-object-with-zero-values

Answer 1

Try using Angulars AfterContentChecked lifecycle since you are projecting your html to the component

  ngAfterContentChecked() {
    if (this.box) {
      await this.domCtrl.read(() => {
        console.log(this.box.nativeElement.getBoundingClientRect());
      });
    }
  }

And just for a test try to add a setTimeout function inside the life cycle hook and only then getBoundingClientRect(), perhaps the element havent been fully rendered when you are checking it