When referencing my DOM element using ViewChild in the code, I sometimes encounter an issue where the offsetHeight and offsetWidth are zero in the ngAfterViewInit hook. This leads me to believe that the element has not yet been rendered in the DOM. Are there any solutions to this problem? I am currently working with Ionic 4.
HTML:
<div id="map" #map [style.height.px] = "'300'" [style.width.px]="'100'"></div>
TS:
...
map: any;
@ViewChild('map') mapElement: ElementRef;
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
//usually return 0
console.log('height:' + this.mapElement.nativeElement.offsetHeight);
console.log('width:' + this.mapElement.nativeElement.offsetWidth);
this.map = DG.map(this.mapElement.nativeElement);
}
...
In this scenario, the expected outcome is to obtain a height of 300 and a width of 100.