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: ```html ``` 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](https://ionicframework.com/docs/api/modal#sheet-modal). If I could use the trigger tag, it would be done this way: ```html ``` 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 ```html {{title}} ``` see? no ion-modal what I did was add my **initialBreakpoint** and **breakpoints** in the async function as properties of the modalOptions interface. ```tsx export interface ModalOptions { component: T; componentProps?: ComponentProps; presentingElement?: HTMLElement; showBackdrop?: boolean; backdropDismiss?: boolean; cssClass?: string | string[]; delegate?: FrameworkDelegate; animated?: boolean; canDismiss?: boolean | ((data?: any, role?: string) => Promise); 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.* ```tsx 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!

mtspadda

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

Join Our Newsletter. No Spam, Only the good stuff.