css doesn't update in cached view

[rchisholm]

I am building an app with Angular and TypeScript, starting with Nativescript's TabView template (created using Sidekick), using the orientation plugin, which is very useful except for this one issue.

It worked as expected when switching orientations on one tab or page. But when I viewed all tabs on one orientation, switched my orientation, then navigated to the other tabs i'd already seen, they did not change their class to or from .landscape.

For instance, I open the app in portrait orientation, open each tab, and they all display correctly. Then I turn my device to landscape orientation, and my current view changes classes and styles appropriately. Staying in landscape orientation, I now switch to other tabs, which still have the portrait styles and classes applied to them.

Switching tabs does not reload the views, but turning the screen does reload the view (only the current one). A possible solution would be to move away from the tab scheme, and use the bottom icons exclusively as links to the top level of each section (6-icon grid). But this would be a dramatic change in the navigation scheme and may not be worth it. Another possible solution would be to force a reload of the views as they open, but I have not found a way to accomplish this.

For now I have applied a workaround which disables landscape orientation, keeping the views in portrait orientation, and stopping them form changing styles.

Any help would be appreciated, as I would like to be able to use portrait and landscape navigation in my app.

Here is an app that shows the problem:
https://github.com/rchisholm/orientation_bug_example.git

This app should appear green in portrait, red in landscape. if you navigate to each tab, turn the screen to landscape, then navigate back through the tabs (staying in landscape), they will appear green, when they should appear red.

[NathanaelA]

Angular is a strange beast; it has change detection that doesn't always fire properly. You might try using the ngZone in the orientation callback to trigger a change detection.

[rchisholm]

Thanks @NathanaelA I will try that... I realize that this module is build for pure JS NativeScript so it might not work 100% with Angular but I will keep trying.