how to handle EventEmitter for a component created through Modal

[glongchi]

Support Question

Sorry I am asking this question here because I haven't gotten any response from the forum: Hi, I have a dump component(i.e only has Input and Output). I am creating the component through a ModalController. I can easily pass in the required input params as per the docs. The issue I have now is how to subscribe to the component's output event. for ionic v3 this was easily done, see related stackoverflow Q&A(https://stackoverflow.com/questions/42259421/ionic2-how-to-catch-events-from-within-a-modal-component-created-from-modalcon) basically how would to realise this ionic v3 implementation in ionic 4

const modal = this.modalCtrl.create(MyComponent);
modal.didEnter.subscribe(() => {
    modal.instance.myAwesomeEvent.subscribe(....)
});

Note this is different from the use case where you get teh data returned onDidDismiss(). I have looked through the source code(https://github.com/ionic-team/ionic/blob/master/core/src/components/modal/modal.tsx) but can seem to arrive at a solution

[paulstelzer]

Thanks! I think you have no chance to subscribe to an event outside of the modal component in v4. So you have to subscribe inside your modal and afterwards just return the data on dismiss.

You just can return data, just do the following:

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

Inside your modal you have to do this:

// Dismiss the top modal returning some data object
modalController.dismiss({
  'result': value
})

PS: You can also open a feature request if you need what you described

[glongchi]

Thanks @paulstelzer , yes I have seen this use case. which I don't think applies to my scenario. I will have to create a feature request. My use case in summary: I have a TagAdminComponent(a smart component that is able to call a Tagservice or state management store).This parent component houses reusable; list(generic-list) and form(generic-form) child components. These serve a dumb reusable component which communicates with the parent through inputs and output:

  <ion-content padding>
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="6">  
            <generic-list
              [hasCustomTemplate]="false"
              [isApp]="isApp"
              [itemList]="modelList"
              (viewItem)="onViewItem($event)"
              (updateItem)="onUpdateItem($event)"
              (deleteItem)="onDeleteItem($event)"
              (archiveItem)="onArchiveItem($event)"
            >
            </generic-list>
        </ion-col>
        <ion-col *ngIf="!isApp" size="12" size-md="6">
          <generic-form [config]="config" (created)="onCreated($event)"> </generic-form>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-fab *ngIf="isApp" vertical="bottom" horizontal="end" slot="fixed" (click)="presentItemForm(config)">
      <ion-fab-button> <ion-icon name="add"></ion-icon> </ion-fab-button>
    </ion-fab>
  </ion-content>

so on a larger screens the two child components are rendered side by side but on small sreens(usually on mobile phone), I render just the list component and launch the form component through modal and I need to be able to handle the created event(in the child form component) through the oncreate method defined in the parent. I am using these generic child components accross the application hence the dumb-smart components design approach.

In ionic v3 I could easily handle this implementation with the code snippet below. Not sure why this ability missing ionic 4

const modal = this.modalCtrl.create(MyComponent);
modal.didEnter.subscribe(() => {
    modal.instance.create.subscribe( //call this.onCreate(event) )
});

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.