CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2515

Implementing popover controller in Ionic

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();
    }
  }

Upvotes: 2

Views: 5849

Answers (1)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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();
    }
  }

Upvotes: 5

Related Questions