How To Output in Event From Popover in Ionic 4?

Ionic Framework
1

I would like to @Output an Event from from Popover component to Parent component.
My Popover Component is

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.scss']
})
export class OrderComponent implements OnInit {
  @Output()
  onSelection = new EventEmitter<any>();

  constructor() {}

  ngOnInit() {}

  public selected() {
    this.onSelection.emit();
  }
}

Parent Component is

async sortPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: OrderComponent,
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

I what to receive the onSelection event from Popover component into Parent component.

Dose any body know how to do that?

2

I don’t know if this is somewhat similar, but I have emitter problem in my project also with custom component. My emitter does work, if it’s in ngOnInit(), but when I try to use the same code in a function on that same component (exactly the same code / emit), it doesn’t ever send the emit. I have no idea why it doesn’t work in that function, but work on ngOnInit() -function. My problem is that I really can’t use the ngOnInit() because some other things in my code are not ready yet (user login) so the code in ngOnInit fails. However, I have “hacked it” by setting a timeout in ngOnInit(), but I would really like to get to the bottom of why the event emitter doesn’t emit in the other function, when I call it from my app.components… The function (and function call) does work, it just won’t emit.

3

Did you find a solution?

4

There is another way instead of using @Output:

async sortPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: OrderComponent,
      event: ev,
      translucent: true
    });
    // CHANGE THIS
    popover.present();


    // ADD this for handle response:
    return popover.onDidDismiss().then(
      (data: any) => {
        if (data) {
          // trigger here the method dependind on the popover response
        }
      }
  }

In the OrderComponent.ts:

// Create a method to emit data to the parent component
public onSelection() {
  this.popover.dismiss({ data: selection });
}
2 Likes
5

This solution works thanks

6

This worked for me, Thankssssss :smiley: