DEV Community

Cover image for how to: open a component like a sheet modal using ionic 7
Matheus Padilha
Matheus Padilha

Posted on

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

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)">
Enter fullscreen mode Exit fullscreen mode

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]">
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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();
  }
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)