CODEWITHSUNDEEP
angulartypescriptmodal-dialognativescriptnativescript-angular
luiswill
luiswill

Reputation: 982

ngOnInit and data binding not working in ModalView NativeScript Angular

I am searching sincerely since 2 days and trying to fix that problem due to lack of knowledge. I have started Nativescript recently and I am intermediate with Angular.

Problem

const options: ModalDialogOptions = {
      viewContainerRef: this.viewContainerRef,
      fullscreen: false,
      context: {},
    };

    this.modalService.showModal(ShopInfosComponent, options);

ShopInfosComponent belongs to the BrowseModule where I understand that I need to add it to 

@NgModule({
    imports: [
        NativeScriptCommonModule,
        BrowseRoutingModule,
    ],
    declarations: [
        BrowseComponent,
        MapComponent,
        ShopInfosComponent
    ],
    entryComponents: [ShopInfosComponent]
})

BrowseModule belongs to the upper Module AppModule.

Real Problem :

The modal ShopInfosComponent successfully opens as intented, but there is no data binding, actually ngOnInit is not called (unlike the constructor).

This is the content of the modal shop-infos.component.html: 

<StackLayout>
    <Label [text]="result"></Label>
    <Label text="Static Text"></Label>
</StackLayout>

What I've tried

I've tried to open a modal directly inside AppModule with the app.component.ts, which weirdly works ! It's only not working when putting inside another module which is imported by AppModule.

The app template used is the Navigation Drawer from Nativescript.

Maybe it's a problem with the lazy loading app routing ?

I've uploaded the app graphic documentation and source code on my website : https://luiswillnat.eu/stack/nativescript/databinding/

Please feel free to use, I am really willing to find the solution and to learn from it.

enter image description here

Upvotes: 2

Views: 867

Answers (1)

luiswill
luiswill

Reputation: 982

As @Lasanga Guruge mentionned in the comments, it's a current issue of nativescript-angular.

Current work around to have data binding and ngOnInit in the modal view is to detect changes manually.

setTimeout(() => {
   this.zone.run(() => this.result = "WORKING")
});

or 

setTimeout(() => {
   this.changeDetectorRef.detectChanges();
});

are the workarounds for the moment.

Upvotes: 1

Related Questions