[How?] Ionic 2 POPOVER Passing group radio button value to Page

Hi,

I have been trying to make sense of the Popover component in ionic2.
Perhaps I am not really good with Anuglar2… I really couldnt understand how the source demo works.

A popover has to be called from Page component, making it a child component.
Now, assume I have chose an option from group radio button in the PopOver, how do I pass the NgModel value back to the Page “parent” component?

I tried the close() “dismiss” command from the document and i doesnt seem to be responding, i hv to click on blank areas to close the PopOver.

Any ideas? I really want to use the PopOver as a sub menu, since the dropdown menu cannot be styled well.:disappointed_relieved:

I think your query is to pass some value to parent component when something is selected from Popover.
Use popover.onDismiss method to read data back in parent component

presentPopover(ev) {
    let popover = Popover.create(PopoverComponent);
    this.nav.present(popover, {
        ev: ev
    });
    popover.onDismiss(data => {
        console.log("popover dismissed");
        console.log("Selected Item is " + data);
    });
}

and send data when you are closing popover like below

import {Component} from "@angular/core";
import {ViewController, NavParams} from "ionic-angular";

@Component({
    template: `
   <ion-list>
     <ion-list-header>Select Some item</ion-list-header>
     <button ion-item (click)="close(item)" detail-none >item</button>
     <button ion-item (click)="close(item1)" detail-none >item1</button>
   </ion-list>
 `
})
export class PopoverComponent {
    constructor(private viewCtrl: ViewController) {
    }

    close(selectedItem) {
        this.viewCtrl.dismiss(selectedItem);
    }
}
7 Likes

Thanks @ankushagg93 this I finally get this working!! :+1:

a second note, I really need to set some Global Variable for some components to change and watch/update… and for ngSwitch to switch case by that.

are there any easy way to achieve that? I realise there’s no more $rootScope and it dun seem to allow the concept of hving a global variable… I really dont get to understand how this works… :frowning2:

Is your query related to Popover? Can you give some flow that you want to achieve? Also, please mark this as solution, it will be helpful for others facing same problem in future.

1 Like

Thank you this helped me. There must have been a code update since the answer as

popover.onDismiss(data => {

should now be

popover.onDidDismiss(data => {

there is also a

popover.onWillDismiss(data => {

but I can’t imagine what it does.

1 Like

The difference is that popover.onWillDismiss(...) fires before the popover is dismissed, wheras popover.onDidDismiss(...) fires after the popover is dismissed. So one fires before the dismiss animation, and the other one after.