Ionic 4: Popover with alert/select style buttons

Ionic Framework
1

I am trying to create a popover that emualates the style of the elements created by the AlertController, since i need a more custom alert body than the controller allows for.

Is there any intuitive way to add the same style buttons at the bottom of the popover?

2

A picture would be good, I for one, have no idea what you are talking about! :slightly_smiling_face:

3

I have solved this with a workaround:

popover.page.html

<ion-header>
  <ion-toolbar>
    <ion-title style="padding: 0;">Custom Popover</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollY]="false">
  <!-- MY COMPLEX CONTENT -->

  <ion-footer #footer></ion-footer>
</ion-content>

popover.page.ts

constructor(
    private alertController: AlertController,
    private popoverController: PopoverController
  ) { }

@ViewChild('footer', { static: false }) footer: IonFooter;

  private attachBtnGroup() {
    this.alertController.create(
      {
        buttons: [
          {
            text: 'Cancel',
            handler: () => {
              this.popoverController.dismiss();
            }
          },
          {
            text: 'Ok',
            handler: () => {
              // Do
            }
          }
        ]
      }).then(alert => {
        const btnGroup = alert.querySelector('.alert-button-group');
        if (this.footer && btnGroup) {
          (this.footer as any).el.appendChild(btnGroup);
        }
      });
  }

  ngOnInit() {
    this.attachBtnGroup();
  }