I have been trying to execute the function, but consistently I getting TypeError: _co.presentPopover is not a function error, actually, it should give the output as test 1. I have checked the definition and home.ts, but everything is defined and I have checked it twice and thrice, It doesn’t make any sense
plesae help and thanks in Advance
here is my code
----------------home.html----------------------------
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="presentPopover($event)"> Open popover </button>
</ion-content>
-------------------------home.ts--------------------------------------------
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PopoverComponent } from '../../components/popover/popover';
import { PopoverController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public popoverCtrl: PopoverController) {
}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverComponent);
popover.present({
ev: myEvent
});
popover.onDidDismiss(popoverData => {
console.log(popoverData);
});
}
}
-------------------popover.html--------------------
<!-- Generated template for the PopoverComponent component -->
<ion-list ion-button (click)="presentPopover($event)">
<ion-item> Item-Text </ion-item>
</ion-list>
---------------popover.ts-------------------------------
import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
/**
* Generated class for the PopoverComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
@Component({
selector: 'popover',
templateUrl: 'popover.html'
})
export class PopoverComponent {
items: any;
text: string;
constructor(public viewCtrl: ViewController) {
this.items = [
{ item: 'Test 1' },
{ item: 'Test 2' },
{ item: 'Test 3' },
{ item: 'Test 4' },
{ item: 'Test 5' },
{ item: 'Test 6' },
{ item: 'Test 7' },
{ item: 'Test 8' },
{ item: 'Test 9' },
]
}
itemClick(item) {
this.viewCtrl.dismiss(item);
}
}