How to add ion-footer to a modal

Hi guys, I’m curious if there’s an easy way to add ion-footer to a modal component. In the following setup, the footer isn’t visible. It’s being pushed out of the view by ion-content.



  <Ion-footer> // this is not visible

In case anyone finds this useful, I settled for a workaround. Basically, inside the modal content, I have a footer element pinned to the bottom:

  <footer class="form-footer">
      // footer stuff
<style lang="scss">
  .form-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 56px;

When using the Modal Controller you define a Component which the Modal will render

const modal = await this.modalController.create({
      component: modalComponent

At that point the modalComponent is just a standard component. Just use a footer as expected

    <ion-buttons slot="end">
      <ion-button (click)="closeModal()">Close</ion-button>
  <p>Content Goes Here </p>
      <ion-button slot="end">Add New</ion-button>
1 Like

That’s the stuff! Thanks for this. I got in the habit of using inline modals so much so that I’ve started mixing things up in the markup.

Thanks again!