Nativescript-angular: Using page.showModal with @Component's

Created on 2 Mar 2016 · 12Comments · Source: NativeScript/nativescript-angular

Given my.component is an angular Component:

page.showModal('./pages/my.component', 'Modal Context', () => {
 // close function
}, true);

Wasn't too surprised to see it throw this:

file:///app/tns_modules/ui/frame/frame-common.js:83:94: JS ERROR Error: Failed to load Page from entry.moduleName: ./pages/my.component

Curious how to integrate the page's showModal api with nativescript-angular.

Source

NathanWalker

All 12 comments

I was thinking of modeling that after the dialog component in the material design examples which uses the DynamicComponentLoader to create a dialog and "load" a component in there.

hdeshev on 2 Mar 2016

nripendra on 2 Mar 2016

@hdeshev that would be great :+1:

NathanWalker on 2 Mar 2016

:+1:

matt4446 on 2 Mar 2016

Any workaround that can be used as of now?

nripendra on 17 Mar 2016

@nripendra You can create a directive that creates a Page object and calls showModal. If you build the entire dialog UI in your JS code, it should work.

hdeshev on 17 Mar 2016

👍1

Not sure if I fully understood. How would I load my angular component into page object?

nripendra on 17 Mar 2016

I meant that you should not use angular components into the dialog at all and build your entire dialog UI in JavaScript.

hdeshev on 17 Mar 2016

Hmm that's bad news. But shouldn't be a problem for now though. I have couple of simple components only in dialog.

nripendra on 17 Mar 2016

Hi!

This was fixed? I'm still getting the error

 Error: Failed to load Page from entry.moduleName: ./pages/menu/menu.component

Any idea? Do I need to do something extra to the component?

I'm doing this

    let page = frames.topmost().currentPage;

    page.showModal('./pages/ordenes/ordenes.component', "Showing modally", () => {

        console.log("Cerro");

    }, true);

Thanks

PedroAnibarro1 on 29 Jul 2016

@PedroAnibarro1
In apps using angular you should not call showModal of the page directly (its equivalent of working directly with DOM elements in a ng-web app - you should avoid it). Check this article that explains how to show modals in angular-nativescript app.