Ionic 4 modal component incorrect parameter type

user_3357270 0
Viewed 1688

I am working on a modal component (that is working) but I am getting an error in my IDE that is telling me that the parameters are incorrect.

Here is my (working) code, but I'm not sure what I am doing wrong?

async openMyModal(myProps: ModalProps) {
    const modal = await this.modalCtrl.create({
      component: MyPropsModalComponent,
      componentProps: myProps
    });

    modal.present();
}

The error I am getting is:

Argument type {component: MyPropsModalComponent, componentProps: ModalProps} is not assignable to parameter type ModalOptions

Clicking into the actual (Ionic) code, I can see this for modal options:

...
component: T;
componentProps?: ComponentProps<T>;
...

Is there a different way I should be assembling the modal in my .ts file? Thank you for any suggestions!

EDIT

myProps is just an object that I am passing into the modal component.

export interface ModalProps {
  name?: string;
  email?: string;
  foo?: string;
  ...
}

MyPropsModalComponent is a component I generated with the CLI. So what I'm doing (and it's working) is passing in an object (myProps) to the MyPropsModalComponent. All is working & rendering, I'm just curious why I am seeing that error? I am guessing that is a linting error?

ionic4 ionic-framework
1 Answers

I had this same problem and it turns out that IntelliJ was automatically importing ModalOptions from ngx-bootstrap instead of @ionic/core. For whatever reason my IDE was not able to find the @ionic/core version on it's own).

So I changed:

import {ComponentProps, ModalOptions} from 'ngx-bootstrap';

Into:

import {ComponentProps, ModalOptions} from '@ionic/core';

user_14572190
Related