Refresh page when the screen orientation is changed

Ionic Framework ionic-v3
1

Hello guys, I am using ag-grid to display som data, and when the screen orientation is changed I need the grid to be resized.
Right now to resize it, I am reloading the page in this way(Btw it’s in the constructor): this.screenOrientation.onChange().subscribe( () => { this.navCtrl.setRoot(this.navCtrl.getActive().component); } )

This works, but is far from good…
The first time the orientation is changed it won’t resize. Then it goes in some kind of loop. Second time orientation is changed setRoot is called 2 times, then 4 times, then 8 etc. This makes the list for the grid slower and slower to load.

Anyone that have an idea what I am doing wrong/what I should do?
Thanks:)

2

Put it in ionViewDidEnter and unsubscribe in ionViewWillLeave?

U r suffering from stacking subscriptions for sure

2 Likes
3

Thanks, this solved the problem with the increasing loop.

However, now I got a new problem.
It is resizing to the previous “screen” size, and not the current.
I think it’s because the HTML that defines the size of the grid runs before ionViewDidEnter() is called.
Do you have any idea to solve this?

4

Hello. I know this is old, but how do you unsubscribe?
It highlights error when you type this.screenOrientation.onChange().unsubscribe() saying "Property ‘unsubscribe’ does not exist on …"

5

I would use this nifty untilDestroyed Directive instead of doing this manually, but the answer to your question is that you need to save the result of your subscribe call:

subscription = this.screenOrientation.onChange().subscribe(() => {});
subscription.unsubscribe();