Implementing popover controller in Ionic

Question

Brief explanation: Trying to implement popover controller on home.html page. Trying to follow the documentation but still unable to get through.

I have created popover.ts page beside home.ts but when I am trying to import in home.ts , it is saying Cannot find module 'popover'.

What am I doing wrong ?

home.ts

import { PopoverController } from 'ionic-angular';
import { PopoverPage } from 'popover';

    @Component({})
    class MyPage {
      constructor(public popoverCtrl: PopoverController) {}

      presentPopover(myEvent) {
        let popover = this.popoverCtrl.create(PopoverPage);
        popover.present({
          ev: myEvent
        });
      }
    }

popover.ts

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


@Component({
    template: `
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item (click)="close()">Learn Ionic</button>
        <button ion-item (click)="close()">Documentation</button>
        <button ion-item (click)="close()">Showcase</button>
        <button ion-item (click)="close()">GitHub Repo</button>
      </ion-list>
    `
  })
  class PopoverPage {
    constructor(public viewCtrl: ViewController) {}

    close() {
      this.viewCtrl.dismiss();
    }
  }

AddWeb Solution Pvt Ltd · Accepted Answer · 2018-01-04 12:16:21Z

5

try this one

home.ts

import { PopoverController } from 'ionic-angular';
import { PopoverPage } from './popover';

    @Component({})
 export class MyPage {
      constructor(public popoverCtrl: PopoverController) {}

      presentPopover(myEvent) {
        let popover = this.popoverCtrl.create(PopoverPage);
        popover.present({
          ev: myEvent
        });
      }
    }

popover.ts

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


@Component({
    template: `
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item (click)="close()">Learn Ionic</button>
        <button ion-item (click)="close()">Documentation</button>
        <button ion-item (click)="close()">Showcase</button>
        <button ion-item (click)="close()">GitHub Repo</button>
      </ion-list>
    `
  })
  export class PopoverPage {
    constructor(public viewCtrl: ViewController) {}

    close() {
      this.viewCtrl.dismiss();
    }
  }

edited Jan 4, 2018 at 12:16

answered Jan 4, 2018 at 11:32

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AddWeb Solution Pvt Ltd Over a year ago

please mask as a solution if it has resolved your issue

user2828442 Over a year ago

[ts] Module '"f:/D/IONIC/experiments/myapp/src/pages/home/popover"' has no exported member 'PopoverPage'.

Collectives™ on Stack Overflow

Implementing popover controller in Ionic

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related