Manipulation Done on Native Elements Removed on Back Navigation

[shripalsoni04]

It seems like any manipulations done on native android element is getting removed when we navigate back to the route having that component.

Preview of the Issue:

Issue Description:

Here, I have created a class directive with selector '.test-btn' and I have attached this class directive to the button on Page1. Now when we navigate to other page and come back to the page again, the background color that I set using native api is getting removed.

I know we can set background color using nativescript only, but just to illustrate the issue easily, I am setting backgroundColor using native android api.

I don't know the same issue is for iOS also or not as I have tested on android only till now.

Sample Project Code

You can find the sample project described above at https://github.com/shripalsoni04/ns-ng-route-change-issue.

I am not sure but It seems like nativescript is creating the native button element again on back navigation and the directives attached to it are not executed again.

It will be great if we can find a solution for this.

[asaph26]

I think this is related to the new angular router creating the components again.

More info on this is here
angular/angular#7757 (comment)

[hshristov]

@shripalsoni04 All changes made by accessing the native elements are lost because we the native elements are destroyed when navigation happens. This is done in order to reduce memory pressure. If you want to keep the native elements alive you can set frameModule.topmost().android.cachePagesOnNavigate=true. Please note that this will keep all native views alive and if you happen to have Images on that page they will remain in memory which will sooner or later results in OutOfMemory exception.

[shripalsoni04]

Thanks a lot @hshristov, this information will surely help us in deciding app design strategy.

[shripalsoni04]

I have one question. If on back navigation native views are re-created, and angular component is re-used, so is there any way that we can attach the angular directives back on the native views. If there is any way or it is accommodated in nativescript-angular, that will be very helpful in such scenarios.

Edit (Adding more information) :
Class directives in nativescript angular app is useful and provides a very nice and clean way to style native views based on platforms. If the class directives are detached from the native view on back navigation, then we will loose this clean way of coding and we need to write utility functions instead of class directive and call that function for all the UI elements which needs similar behaviour, which will surely add more coding and will not look as clean as it is with class directives.

[hshristov]

@vakrilov Will know better about angular component.

[vakrilov]

@shripalsoni04 - You got all things right. When navigating the components are cached, but the actual android views are recreated. So here are the 3 levels of abstraction here:

1. Angular component - cached
2. Nativescript View - cached
3. Native platform view (IOS or Android specific) - not cached (unless cachePagesOnNavigate=true)

As the component instances are cached (lvl 1) the lifecycle hooks (ngOnInit for example) will not re-execute on navigation.

If you are touching the Native android view directly you can attach to the loaded event of the nativescript-view (lvl 2). It will fire every time the android view (lvl3) is created. I have done a PR to your repo with example.

[shripalsoni04]

That is an awesome explanation of caching mechanism. The solution of using loaded event on nativescript view works great.

Thanks a lot @vakrilov 👍