angular - Ionic 5 pass value from Modal to Page

Question

I need to pass a data (just one string) from a modal to his "parent page" on Ionic5, basically when the user click on an item of the Modal it should pass the string to the page which filter in an array and show the result

Those are the clickable items on the modal:

<ion-row>
  <ion-col class="ion-no-padding-vertical">
    <ion-list class="ion-no-padding-vertical">
        <ion-item class="ion-no-border" button>
          <ion-icon class="ion-input-icon-big" slot="start" name="bu"></ion-icon>
          <ion-label>Burn</ion-label>
        </ion-item>
    </ion-list>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col class="ion-no-padding-vertical">
    <ion-list class="ion-no-padding-vertical">
        <ion-item class="ion-no-border" button>
          <ion-icon class="ion-input-icon-big" slot="start" name="be-battery-weak"></ion-icon>
          <ion-label>Battery Too Weak</ion-label>
        </ion-item>
    </ion-list>
  </ion-col>
</ion-row>

This is the page.ts of the modal:

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
  selector: 'app-cmd-v4-modal',
  templateUrl: './cmd-v4-modal.page.html',
  styleUrls: ['./cmd-v4-modal.page.scss'],
})
export class CmdV4ModalPage implements OnInit {
 constructor(private modalController: ModalController) { }
 ngOnInit() { }
 async closeModal() {
     await this.modalController.dismiss();
 }
}

and this is the page.ts of the "parent" page:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { ModalController } from '@ionic/angular';

import { CmdV4ModalPage } from './cmd-v4-modal/cmd-v4-modal.page';
import * as cmd_v4_error_json from '../../assets/ErrorCodes/CMD-V4-ERROR.json';

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

  constructor(private modalController: ModalController) { }

  async CMDV4Modal() {
    const modal = await this.modalController.create({
      component: CmdV4ModalPage
    });
    return await modal.present();
  }

  ngOnInit() { }
}

I tried to Google but I don't find a way to achieve this. Thanks

REPLY to Peter

thank you so much for the help but I just have an error:

error TS2554: Expected 0 arguments, but got 1.

got this on modal.page.ts

async closeModal() {
let data = { name : 'John'};
this.modalController.dismiss(data);
}

and this on the main page cmd-v4.ts (parent page)

async CMDV4Modal() {
const modal = await this.modalController.create({
component: CmdV4ModalPage
});
modal.onDidDismiss(data => {
console.log(data);
});
return await modal.present();
}

Answer 1

Inside the dismiss() method pass the string:

let data = { name : 'John'};
this.modalController.dismiss(data);

Then in your page, you can use onDidDismiss() to get the value from the modal:

  async CMDV4Modal() {
    const modal = await this.modalController.create({
      component: CmdV4ModalPage
    });
    modal.onDidDismiss(data => {
     console.log(data);
   });
   await modal.present();
  }