After migrating to RC0, Popover not working giving no errors

Ionic Framework ionic-v3
1

I followed the steps of “Copying your Project to a New Project”.
But after that everything seems working good except Popover.

/* POPOVER */
@Component({
  templateUrl: 'home.popover.html'
})
class HomePopover {
   // omitted rest of the code inside here.. 
}

@Component({
  templateUrl: 'home.html'
})
export class HomePage {
  constructor (
    private popoverCtrl: PopoverController
  ) {
  }
  presentPopover(ev) {
    console.log('clicked?');
    let popover = this.popoverCtrl.create(HomePopover);
    popover.present({
      ev: ev
    });
  }
}

it triggers the console log “clicked?” but nothing happens. no errors at all, but it freezes.
Was working fine with the build just before RC0.

2

I’m facing the same issue :frowning:

Edit: Neither Modals nor Popovers are working. Alerts are working as expected.

3

Okay I figured out the problem.

Here’s the starter project with the popover working…

To solve the problem

#1. in app.module.ts, you need to have your popover component also added like the page components

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    HomePopover
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    HomePopover
  ],
  providers: []
})
export class AppModule {}

#2. don’t put your popover component under same ts file. I have tried putting HomePopover component under home.ts and somewhat it didn’t like it.

funny thing is that even if i didn’t put those popover component, or even page component in app.module.ts, there was no complaints when pushing to navcontroller. So, couldn’t figure out what was going on.

4

Modal works find. I’m having same problem with the Popover

5

I fixed all with above solution.

6

I did followed your solution, popover shows when i click button, but it doesn’t talk back.
I mean,
If I change a value from the popover, the content from the page where it called popover doesn’t change.
main ts.

import { Component  } from '@angular/core';
import { NavController, MenuController, PopoverController } from 'ionic-angular';
import { FilterPopover }      from '../filter-popover/filter-popover';

@Component({
  selector: 'page-list-view',
  templateUrl: 'list-view.html'
})
export class ListView {


  sortOrder: string = "1";

  constructor(
    public navCtrl: NavController,
    public menuCtrl: MenuController,
    public popoverCtrl: PopoverController
  ) {

  }

  presentPopover(ev) {
    let popover = this.popoverCtrl.create(FilterPopover, {
      sortOrder: this.sortOrder,
    });

    popover.onDidDismiss(value => {
	     console.log(value);
	  });

    popover.present({
      ev: ev
    });
  }
}

Popover ts

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


@Component({
  selector: 'page-filter-popover',
  templateUrl: 'filter-popover.html'
})
export class FilterPopover {
  orders: string;
  sortOrders: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {}


  ngOnInit() {
    if(this.navParams.data) {
      console.log(this.navParams.data);
      this.sortOrders = this.navParams.data.sortOrder;

      this.setOrder();
    }
  }

  setOrder() {
    if(this.sortOrders) {
      this.orders = this.sortOrders;
    }
  }

  doSorting() {
    console.log("abc");
    if(this.orders) this.sortOrders = this.orders;
  }

}

the this.sortOrders from the popover ts doesn’t talk back to main ts.