How to use the @ionic/core.modalController.create function in @ionic/core

async allImages() {
    this.savedImage = null;

    const modal = await modalCtrl.create({
      component: 'app-images',
      cssClass: 'imagesModal',
      showBackdrop: navigator.userAgent.includes('iPad') === false && window.matchMedia("(min-width: 1200px)").matches ? false : true
    });
    await modal.present();

    const { data } = await modal.onDidDismiss();
    console.log(data);

    if (data && data.url) {
      console.log(data);
      if (data.name) {
        this.currentFileName = data.name;
      }

      this.savedImage = data.url;

private async openModal(selectedElement: HTMLElement, slide: boolean, deck: boolean, componentTag: string, action?: EditAction) {
        const modal: HTMLIonModalElement = await modalController.create({
            component: componentTag
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data && selectedElement) {
                if (action === EditAction.OPEN_CUSTOM_LOGO) {
                    await this.updateSlideAttribute(selectedElement, detail.data, 'img-src');
                } else if (action === EditAction.OPEN_DATA) {
                    await this.updateSlideAttribute(selectedElement, detail.data, 'src');
                } else {
                    await this.appendImage(selectedElement, slide, deck, detail.data);
                }
            }

            this.blockSlide.emit(false);
        });

private async openNotes() {
        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-notes',
            componentProps: {
                selectedElement: this.selectedElement
            }
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data && this.selectedElement) {
                this.notesDidChange.emit(this.selectedElement);
            }

            this.blockSlide.emit(false);
        });

        this.blockSlide.emit(true);

async install() {
    const modal = await modalCtrl.create({
      component: 'install-modal',
      cssClass: 'installModal',
      componentProps: {
        installEvent: this.deferredPrompt
      }
    });
    await modal.present();
  }

private async presentConfirmDelete($event: UIEvent) {
        $event.stopPropagation();

        if (!this.deck || !this.deck.data) {
            return;
        }

        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-deck-delete',
            componentProps: {
                deckName: this.deck.data.name,
                published: this.deck.data.meta && this.deck.data.meta.published
            }
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data) {
                await this.deleteDeck();
            }
        });

        await modal.present();
    }

private async presentConfirmDelete() {
        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-user-delete',
            componentProps: {
                username: this.apiUser.username
            }
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data) {
                await this.deleteUser();
            }
        });

        await modal.present();
    }

private async openConnectModal() {
        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-remote-connect'
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data) {
                await this.connect();
            } else {
                await this.disconnect();
            }
        });

        await modal.present();
    }

private async openChart(attributes: SlideAttributes) {
        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-custom-data'
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail && detail.data) {
                await this.addSlideChart(detail.data, attributes);
            }
        });

        await modal.present();
    }

private async openSlidePicker() {
        const modal: HTMLIonModalElement = await modalController.create({
            component: 'app-remote-slide-picker',
            componentProps: {
                slides: this.slides
            }
        });

        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
            if (detail.data >= 0) {
                await this.slidePickerTo(detail.data);
            }
        });

        await modal.present();
    }