nativescript-angular: ngOnInit not running in a modal component until interacting with modal

I have run into a problem where I am trying to display inputs for a form on a modal component. I have not been able to reproduce this in a sample app, and I’m not quite sure why.

In my code, I am instantiating a form whose content I am displaying statically as text, then I have button that can be tapped in order that the content may be edited. I am passing a reference to the form through the context object which I am attaching to the modal params.

When I tap the button to open the modal, it opens and I see empty TextFields. When I put a log into the ngOnInit, it does not show anything, which indicates that it does not run properly.

When I do eventually tap a TextField, all of the data is displayed in all of the fields as I expect to happen on load. At this time the log in ngOnInit shows in my console.

Please let me know if any more information is required or if anyone else has run into this issue.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 22 (7 by maintainers)

Most upvoted comments

This is still an issue, almost one year on

joshcomley on Sep 24, 2019

I solved the problem.

In my case, I was trying to open the modal when app comes back from background. I listen to lifecycle events of the nativescript. However, those events aren’t a part of Angular and Angular cannot know I am changing something related to itself in this case. To notify Angular, I run my code in a zone like this:


constructor(
    private zone : NgZone
) {}

ngOnInit() {
    this.appResumed.subscribe(() => {
        this.zone.run(() => {
            // code goes here
        });
    });
}

appResumed is a subject that notifies when app comes to foreground.

erkanarslan on Sep 5, 2018

After some investigation I have found that the lifecycle hooks are tiggered when and only when the ViewContainerRef used is the root one. As such I use a service to track the root ViewContainerRef (configured in app.component.ts) and then use that whenever I am instantiating a modal.

But this is a workaround, and I’m sure the bug lies somewhere in nativescript-angular, so I’d recommend re-opening this issue.

I have found this issue to be consistent across multiple projects.

joshcomley on Nov 23, 2018

Still an issue, had to workaround by calling setTimeout(() => { this.zone.run(() => this.myFunc()) });

and then placing all my code that I need to run onInit inside of myFunc()

gwhi94 on Jun 1, 2020

@tsonevn I think it’s best to move on to this issue: https://github.com/NativeScript/nativescript-angular/issues/1217

With earlier version of Angular the vcRef was the only change detection problem with modals. With latest Angular change detection doesn’t work at all when app.component is set to ChangeDetectionStrategy.OnPush, no matter what vcRef is used.

jnorkus on Nov 28, 2018

@Mmoks what version are you using? Are you by any chance opening a modal inside a OnPush component?

More often than not you don’t need to specify a viewContaineRef, but if you need providers not in root then you might need to specify the injector. Specifying the viewContaineRef will make the angular view live hierarchically inside that vcRef (meaning it’ll be change detected when that vcRef is CDed), so things like OnPush will prevent CD to happen, whereas passing the injector will render that modal in the root (attached directly to ApplicationRef, a sibling to your AppComponent). This should be all documented under the new Dialog (NativeDialogService) API.

edusperoni on May 4, 2023