From Ionic/Angular is it possible to get a reference to the underlying Stencil Web Component?

Issue

I have an Ionic 6/Angular 10 app using an ion-content content area.

The problem I am running into is that the angular ngAfterViewInit() callback is fired before the DOM is completely rendered so any size queries I do during that callback end up being inaccurate. I have been struggling to find some callback to let me know when the render process has completed so that I can query elements for their final sizes, to no avail.

I came across this github issue discussion: https://github.com/ionic-team/ionic-framework/issues/17920

It seems to imply that one can get a reference to the underlying Stencil based Web Component in order to hook callbacks at that level and get the callback I'm looking for, namely componentDidRender().

However, following the example in the thread does not provide any reference to the methods mentioned in the Stencil documentation.

Is it possible to get a reference to the underlying Ionic Web Component? If so, how?

Thanks.

Solution

I assume what you're looking for is DOM element referencing, which is done via ViewChild in Angular.

https://angular.io/api/core/ViewChild

<my-component #component>

@ViewChild('component') component;

ngAferViewInit() {
  this.component.nativeElement.addEventListener('componentDidLoad', console.log);
}

Answered By - Simon Hänisch