Extending Ionic2 and injecting ModalController

Question

I am trying to develop a datepicker component that can be used for any project.

I have an NgModule that has components and I inject IonicModule in to it so it can use all the components/directives of ionic2.

@NgModule({
    imports: [
        CommonModule,
        IonicModule.forRoot(DatePickerModule)
    ],
    exports: [DatePickerComponent, DatePickerDirective],
    entryComponents: [DatePickerComponent],
    declarations: [DatePickerComponent, DatePickerDirective],
    providers: [DateService, nls]
})
export class DatePickerModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DatePickerModule
        };
    }
};

One of the components injects ionic modal controller to display a modal.

export class MainDirective{
  public static config:any;
    constructor(private modalCtrl:ModalController) {
    }
    openModal() {
        this.modalCtrl.create(DatePickerComponent
        ).present();
    }
}

This NgModule is imported in to another App and from that app I am trying to call openModal. This is how I import

@NgModule({
  imports: [
    IonicModule.forRoot(App),
    DatePickerModule.forRoot(),
],
})

What happens is that it throws an error '_getPortal' of undefined from ionic-angular library. I am guessing that it can't find the app to display to.

I am also guessing that I need to pass to forRoot the ACTUAL APP that will be working but I have no idea how to do this.

What would be the best way to approach this problem?

score 1 · Answer 1 · answered Oct 17 '16 at 14:46

You should only call forRoot on the root module. This call sets up a bunch of application providers, which should only be done when bootstrapping Ionic. What you should do instead is just import IonicModule (no forRoot).

As for the ModalController, it's already provided when you import IonicModule.forRoot in the root module, so you don't need to worry about trying to add that. If you wanted to add it, you could, but it is dependent on the Ionic App which is only available when you bootstrap. So really, it's redundant to try to add it.

Thanks for explaining the process. I tried this and I still encountered the same problem my ngmodule can't find the app root where it should display the modal. — misha130, Oct 17 '16 at 15:43

score 0 · Accepted Answer · answered Dec 20 '16 at 21:43

The solution for this was to extend specific components in ionic to indicate that my component was a modal of its own kind.

Injecting the modalcontroller in to a foreign component is too ineffecient and shouldn't be done in my opinion since your component isn't a modal.

For anything that is going to be displayed ViewController should be extended since this is the type of baseclass that is being displayed everytime you execute a present function.

A present function by proxy is a present function the app itself telling it to display said viewcontroller.

So to revise

Extend component to be a viewcontroller:

export class MyComponent extends ViewController

Inject the App in to your constructor

constructor(private _app:App){}

Display your new component on to the app

this.app.present(this);

Now the modal can be shown.

Can you elaborate a bit on your answer? I am stuck with exactly the same problem. Am I understanding correctly that you basically made your own modal component? Do you have any pointers how to go about it? — Dolf Andringa, May 28 '18 at 15:46
Sure take a look https://github.com/misha130/ion-datepicker/blob/master/src/components/modal.component.ts — misha130, May 28 '18 at 15:49

Extending Ionic2 and injecting ModalController

2 Answers2