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

#ionic #angular #webdev

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();
  }