Popover to show 3 div using ngIf

Ionic Framework ionic-v3
1

Hi,

I want to have a Popover button with 3 options, when I click any of the 3, it should show me particular Div element.
My assumption is, when I click a button in the popover, I can generate a key value, using that I can show the div with ngIF but I can’t get it.

Please advice a proper way to do Popover in Ionic 3

2

I would recoment reading this sites of the docs:

  1. http://ionicframework.com/docs/api/components/popover/PopoverController/

you could use onDidDismiss(<func>) to retrieve wich button was clicked.

  1. https://angular.io/api/common/NgSwitch <- you could use that instead of ngIf if you only want to toggle between the divs.
1 Like
3

My coding is

mypage.html

<button ion-button icon-only (click)=“presentPopover($event)” >


<div *ngIf="popovervalue==1" data1 </div <div *ngIf="popovervalue==2" data2 </div <div *ngIf="popovervalue==3" data3 </div

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

popover.html
<button ion-item (click)=“close(1)”>All
<button ion-item (click)=“close(2)”>Earned
<button ion-item (click)=“close(3)”>Redeemed

popover.ts

export class PopoverPage {
popovervalue: any;

constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {

}

close(val) {
this.viewCtrl.dismiss();
this.popovervalue =val;
localStorage.setItem(‘popover’, this.popovervalue);

}

Can you please advice me what changes I’ve to make in this?

4

popover.ts

export class PopoverPage {

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

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

mypage.ts

presentPopover(myEvent) {
 let popover = this.popoverCtrl.create(‘PopoverPage’);
 popover.onDidDismiss( val => this.popovervalue = val);
 popover.present({
  ev: myEvent
 });
}

mypage.html

<button ion-button icon-only (click)=“presentPopover($event)” >

<div [ngSwitch]="popovervalue">
  <div *ngSwitchCase="1"> 1 </div>
  <div *ngSwitchCase="2"> 2 </div>
  <div *ngSwitchCase="3"> 3 </div>
</div>
1 Like
5

Thanks a million! You nailed it!

Now my another issue found which is, I want to call a GET method when the popover buttons are called. i.e 3 GET methods to be called for all the 3 options? How can I do that?

6 
popover.onDidDismiss( val => {
 this.popovervalue = val;
 // http call here
};

You could simply extent that arrow function.

I’m curious, why you need 3 seperate http calls for that, what are trying to do exactly?
It seems for me like a filter for a list - couldn’t you then make a http request when the site is loaded (and refreshed via a Refresher).
And filter them with an object property for the category?
( Only one Request and sorting in realtime on the client )

What is the data your server is returning?

7

Yah I too realized the same that my idea is funny. I could able to do it with single HTTP call itself. I’ve modified it just before. Thanks a lot for the help! Cheers!

8

and please keep in mind that you only have to filter the list with another filter instead of a new http call - so you didn’t need even need multiple lists and the whole ng switch stuff. But the ngSwitch could be still handy to display a different title or introduction for your list

1 Like