Using page.showModal with @Component's

[NathanWalker]

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.

[hdeshev]

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.

[nripendra]

+1

[NathanWalker]

@hdeshev that would be great 👍

[matt4446]

👍

[nripendra]

Any workaround that can be used as of now?

[hdeshev]

@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.

[nripendra]

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

[hdeshev]

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

[nripendra]

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

[PedroAnibarro1]

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