Ionic 4 page dimensions after orientation change - ionic-framework

Question

I have a component in my Ionic app, that requires the screen dimensions. I am trying to use the Platform plugin to grab the new screen dimensions, after the user changes the orientation of their device. I am trying to do so with the following code:
#Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss'],
})
export class MyComponent implements OnInit, OnDestroy {
deviceWidth: number;
deviceHeight: number;
subs = new Subscription();
constructor(private platform: Platform) {}
ngOnInit() {
subs.add(this.platform.resize.subscribe(async () => {
this.deviceWidth = this.platform.width();
this.deviceHeight = this.platform.height();
console.log(this.platformHeight, this.platformWidth);
});
}
ngOnDestroy() {
this.subs.unsubscribe();
}
}
The issue that I am running into is that platform.resize is called before the animation/transition to the new orientation is complete. And thus, platform.height() and platform.width() are incorrect (they both get set to the smallest dimension of the device). In order to test this, I tried the following for my resize subscription:
subs.add(this.platform.resize.subscribe(async () => {
console.log(`Initial Call- width: ${this.platform.width}, height: ${this.platform.height}`);
setTimeout({ // wait until long after the transition animation
console.log(`After Transition- width: ${this.platform.width}, height: ${this.platform.height}`);
}, 1000);
});
which yields the following, after an orientation change from landscape to portrait:
Initial Call- width: 414, height: 414
After Transition- width: 414, height: 896
Any thoughts on how I can get the proper width/height, without inserting some random setTimeout in the subscription?

Answer 1

The best way i found for my app was to use screen orientation (https://ionicframework.com/docs/v3/native/screen-orientation/).
With that framework you can check landscape/portrait orientation.
Then in your case you just have to make a promise inside the two IF you'll make to get proper size in each orientation