how to: open a component like a sheet modal using ionic 7

Matheus Padilha — Sat, 24 Aug 2024 16:52:17 +0000

Hello folks!

Last week, I got a little task at work that kept me busy the whole Friday.

Here, we prefer to use modals as components. In Ionic, we can't use the trigger property, like this:

<ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">

Since the trigger event is not present in the DOM, Ionic will give an exception saying ‘trigger property should be in the DOM,’ or something like that.

My goal was to add breakpoints and an animation and make a sheet modal. If I could use the trigger tag, it would be done this way:

<ion-modal #modal trigger="open-modal" 
[initialBreakpoint]="0.25" 
[breakpoints]="[0, 0.25, 0.5, 0.75]">

But we are not in an ion-modal, nor are we triggering the modal with its own property. To add more context to my problem, the component I want to open was

<ion-header>
    {{title}}
</ion-header>
<ion-content>
     <!-- html -->
</ion-content>

see? no ion-modal

what I did was add my initialBreakpoint and breakpoints in the async function as properties of the modalOptions interface.

export interface ModalOptions<T extends ComponentRef = ComponentRef> {
  component: T;
  componentProps?: ComponentProps<T>;
  presentingElement?: HTMLElement;
  showBackdrop?: boolean;
  backdropDismiss?: boolean;
  cssClass?: string | string[];
  delegate?: FrameworkDelegate;
  animated?: boolean;
  canDismiss?: boolean | ((data?: any, role?: string) => Promise<boolean>);
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: {
    [key: string]: any;
  };
  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
  breakpoints?: number[];
  initialBreakpoint?: number;
  backdropBreakpoint?: number;
  handle?: boolean;
  handleBehavior?: ModalHandleBehavior;
}

More to explore in the future

Thus, my call to open the modal looks like this. Breakpoints go from 0 to 1, and 1 means fully opened.

 async openModal(params: any) {
    const modal = await this.modalController.create({
      component: ComponentBlabla,
      componentProps: {
        params: params
      },
        initialBreakpoint: 1,
        breakpoints: [1, 0.75, 0.25],
        animated: true,
    });

    await modal.present();
  }

and like this, you have a component opened like a sheet modal!
It is easy, but I didn’t find anyone doing it like this or much in the Ionic docs.

Hope this will be helpful to someone one day!
Thank you and cya guys!

DEV Community: Matheus Padilha

how to: open a component like a sheet modal using ionic 7