Pass value from modal component to page function

Ionic Framework Ionic Angular
1

Hi, I have a model component that opens by my page function, And I want to pass a checkbox value from the modal back to my page without reloading the page.

main.page.ts (FILE)

async _OpenModal(name) {
    const modal = await this.modalController.create({
      component: ItemInfoComponent,
      breakpoints: [0.9],
      initialBreakpoint: 0.9,
      componentProps: {
        item_name: name,
      },
    });
    return await modal.present();
  }

modal.component.ts (page)

async _dismiss(id) {
    const onClosedData: string = 'DATA!';
    await this.modalController.dismiss(onClosedData);
  }

Thanks in advance :slight_smile:

2

Hi there

Did you consult the documentation on modal? You need onWillDismiss handler to get the data.

image
image809×674 7.16 KB

3

Thanks, @Tommertom for the reply, I did that method but still, it is not working !? :thinking:

main.page.ts (FILE)

async _StepModal(sid) {
    const modal = await this.modalController.create({
      component: AddStepComponent,
      breakpoints: [0.9],
      initialBreakpoint: 0.9,
      componentProps: {
        item_name: 'name',
      },
    });
    return await modal.present();
    
    const { data } = await modal.onWillDismiss();
    return  console.log(data);
  }

modal.component.ts (MODAL)

onDone() {
    const data = 'data';
    this.modalController.dismiss(data, 'Test');
 }
4

Because you do a return before it which creates unreachable code - at least that is something that clearly is odd in your code

Ideally your editor shows this to you - maybe even a lint issue?

And returning a console.log is a very odd pattern too

Return should be the last line in a method - if a return value is necessary

1 Like
5

@Tommertom Thanks for informing me you’re right I forgot to remove the (return) statements there. :wink: