How to make a popover menu?

Appflow
1

Hello! Could someone help me how to make a popover menu like this:

more

2

Hi, have you tried using the Ionic popover?


Cheers,
Gustavo.

3

Hi Gustavo thanks for reply.I tried this but when I click display another page in small dimensions.I just want a button.
pop_1

pop_2

4

oh
and what happens if you add an ionic button in that page?

5

I tried adding a button but nothing happens,the same.

6

You can use this reference to show a popOver from a menu button

7

I already seen but didn’t helped so much.

8

Try to console.log anything when you click on the button, to know if it listens to the event or not

9

Can you copy your HTML and TS regarding this function and paste it here so i can tell you what exactly is wrong, ^^

10

HTML

<ion-header>

  <ion-navbar color="secondary">
    <ion-title>Odl Servizi</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="presentPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
      <button ion-button clear color="secondary" (click)="home()">LOGOUT</button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

TS

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

change
presentPopover(myEvent) into presentPopover(myEvent: MouseEvent)

try now and tell me

12

I tried!
Nothing happened

13

did you try to console.log anything to make sure the function is working?

14

Yes!!
Nothing again!!

15

so nothing is logging to the console or its logging but the popover is not showing?

16

popover is not showing

17

Ok,
1- Make sure of the page name you’re trying to open
2- make sure you are importing PopoverController from ‘ionic-angular’
3- make sure you added PopoverController to the constructor as public and ur calling it right

18

Everything is OK !!!

19

Ok, i’m out of options now, why don’t you create a stackblitz project and put your code inside it and send me the link, i will go check it myself and test it

20

OK! Thank you very much for advice!