Modal component is not assignable to parameter of type 'ModalOptions<ComponentRef >'

Ionic Framework ionic-v3
1

Hello , I’m trying to display a modal in a ionic 4 / angular app but the ModalController create function wont take components as first parameter, I’m passing the reference of a component class like in all examples I found but I get the following error in the console :
[ng] ERROR in src/app/pages/factures/factures.page.ts(90,55): error TS2345: Argument of type ‘typeof FacturePaiementComponent’ is not assignable to parameter of type ‘ModalOptions’.
[ng] Property ‘component’ is missing in type ‘typeof FacturePaiementComponent’.

The v3.9.2 API docs doesn’t seem compatible with v4 modal so I’m struggling.

Which reference should I pass ? and btw when I pass a second parameter as data to ModalController.create() it doesn’t accept it, how can I pass data to modal in v4?

code :
Here is the function where I call my modal in a page component :

import {Component, OnInit} from '@angular/core'
import { ModalController, NavParams } from '@ionic/angular';
import {DataService} from '../../services/data.service'
import * as moment from 'moment'
import {Facture} from '../../models/facture'
import {FacturePaiementComponent} from './facture-paiement/facture-paiement.component'

@Component({
  selector: 'app-factures',
  templateUrl: './factures.page.html',
  styleUrls: ['./factures.page.scss'],
})
export class FacturesPage implements OnInit {

  public detailsToggle = false
  public paiementToggle = false


  constructor(public service: DataService, public modalCtrl: ModalController) {
  }

ngOnInit() {
    ...
  }

  togglePaiement(facture: Facture) {
    this.presentPaiementModal(facture)
  }

  async presentPaiementModal(facture: Facture) {
    const paiementModal = await this.modalCtrl.create(FacturePaiementComponent);
    return await paiementModal.present();
  }
}

Here is the modal component :

import {Component, Input, OnInit} from '@angular/core'
import {NavParams} from '@ionic/angular'
import {Facture} from '../../../models/facture'

@Component({
  selector: 'facture-paiement',
  templateUrl: './facture-paiement.component.html',
  styleUrls: ['./facture-paiement.component.scss']
})
export class FacturePaiementComponent implements OnInit {

  constructor(public params: NavParams) {
    console.log('facture', params.get('facture'));
  }

  ngOnInit() {
  }
}

Thanks in advance,
Max

2

Hello,

modalcontroller needs a object like

const modal = await this.yourModalController.create({
      component: yourcomponet,
      componentProps: yourobject,
      cssClass: yourclass
    });

Best regards, anna-liebt

1 Like
3

Thank you Anna, it solved the problem.

Best regards,
Max.