Pages

How to get Data From a Popover to Your Component using onDismiss


Sometimes you come may acrosss a situation where we want to have more options on a particular page in ionic app, that's where ionic Popover come's into action, Popover is a dialog that appears on top of the current view. It can be used for anything, but generally it is used for showing options on top of present view if options does'nt fit in the navigation bar. In this post i'm going to take you through, on how to integrate basic Popover in your ionic application , pass data from present page to Popover and also capture data from callbacks when popover is dismissed.
Create a ionic tab project


ionic start myPopoverApp tabs --v2



Create a new ionic page

ionic generate page presentpop

Once the page is created, Open presentpop.html file in presentpop folder.
Copy and Paste Below html in presentpop.html file.

<ion-header>
  <ion-navbar>
      <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Popover</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="presentPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-border>

    <ion-list-header>
      Classes
    </ion-list-header>

    <ion-item>
      <ion-icon name='planet' item-start></ion-icon>
      Astronomy
      <ion-note item-end>
      To the moon
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-toggle checked="false"></ion-toggle>
      <ion-label>
        Muggle Studies
      </ion-label>
      <ion-icon name='body' item-start></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='leaf' item-start></ion-icon>
      Herbology
      <ion-icon name='rose' item-end color="secondary"></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='flask' item-start></ion-icon>
      Potions
      <ion-note item-end>
      Poisonous
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-icon name='add-circle' item-start></ion-icon>
      Selected
      <ion-note item-end style="color: #00BCD4;font-weight: 600;">
      {{selectedData.title}}
      </ion-note>
    </ion-item>
  </ion-list>

</ion-content>

Now, Open presentpop.ts file in presentpop folder.
Copy and Paste Below code in presentpop.ts file.

 import { Component } from '@angular/core';
 import { NavController, NavParams} from 'ionic-angular';
 import { PopoverController } from 'ionic-angular';
 import { PopoverPage } from '../popover/popover';

 @Component({
   selector: 'page-presentpop',
   templateUrl: 'presentpop.html',
 })
 export class PresentpopPage {
   selectedData:any = {title:"None Selected",id:0};
   constructor(public navCtrl: NavController, public navParams: NavParams,public popoverCtrl: PopoverController) {
   }

   ionViewDidLoad() {
     console.log('ionViewDidLoad PresentpopPage');
   }

   presentPopover(ev) {
     let listData = [{title:"Settings",id:1},{title:"Logout",id:2},{title:"Profile",id:3},{title:"Help",id:4}]
     let popover = this.popoverCtrl.create(PopoverPage, { listData });

     popover.present({
       ev: ev
     });

     popover.onDidDismiss(data => {
      console.log(data);
      if(data!=null){
         this.selectedData = data
      }
    })
   }
  
 }



Now, lets create the popover template.
Create a new ionic page

ionic generate page popover

Once the popover page is created, Open popover.html file in popover folder.
Copy and Paste Below html in popover.html file.

<ion-content >
    <ion-list>

      <ion-item *ngFor="let item of items" (click)="dismiss(item)">
        <ion-label>{{item.title}}</ion-label> 
      </ion-item>
    </ion-list>
</ion-content>

Now, Open popover.ts file in popover folder.
Copy and Paste Below code in popover.ts file.

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

@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {
   items:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
    this.items = this.navParams.get('listData');
    console.log(this.items)
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
  }


  dismiss(item) {
    let data = item;
    this.viewCtrl.dismiss(data);
  }
}



Above Code Explanation.
The presentPopover($event) method is the one which initializes the popover. the $event parameter helps in positioning the popover on the clicked area.

 this.popoverCtrl.create(PopoverPage, { listData })

the above line creates a popover using Popover.html and also sends "listData" data to the respective popover to display as list. once the data is send to "PopoverPage", the data ie "listData" is to be displayed as a list in popover. to do that we should first fetch the data that is sent from "PresentpopPage". this can be achieved by "NavParams", ionic NavParams catches helps in fetching the data from other pages from which the present page is launched. below code fetches the data from "PopoverPage".

    this.items = this.navParams.get('listData');

Once the Data is fetched the variable containing the fetched data, is used in *ngFor to loop data.

<ion-item *ngFor="let item of items" (click)="dismiss(item)">

the dismiss() method is used to close popover.

  dismiss(item) {
    let data = item;
    this.viewCtrl.dismiss(data);
  }

viewCtrl.dismiss method will close the popover, and also sends provided data as callback to the parent page from which the popover is launched. ie in our case "PresentpopPage". The data that is send as callback, should be fetched right?. onDidDismiss() function of Popover catches the callback once the popover is dismissed.

   popover.onDidDismiss(data => {
     console.log(data);
     if(data!=null){
        this.selectedData = data
     }
   })



the fetched data is assigned to "selectedData", you can see that the data changes when item is selected in popover on the browser.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

2 comments:

Siddharth Agrawal said...

Hi, I tried using the above code for the popover function but I am getting errors. The error says that it is unable to create a popover page. Can u please help me on this. It's urgent !

Om Kesarwani said...

Getting Error

Error: Uncaught (in promise): removeView was not found



Details:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.2.9
Angular Compiler CLI: 5.2.9
Node: 6.11.1
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36