Skip to main content
Mapagam

Working with Modal Components

1. Creating Modal

Property Description Default Example
component The component to be displayed inside the modal None component: MyComponent
componentProps Properties to pass to the component None componentProps: { data: 'example' }
cssClass Custom CSS class for styling the modal None cssClass: 'custom-modal'
showBackdrop Whether to show backdrop true showBackdrop: false
backdropDismiss Whether to dismiss modal on backdrop click true backdropDismiss: false
animated Whether to animate the modal true animated: false

Example: Creating a Modal

import { ModalController } from '@ionic/angular';
import { MyComponent } from './my-component';

constructor(private modalController: ModalController) {}

async presentModal() {
  const modal = await this.modalController.create({
    component: MyComponent,
    componentProps: { data: 'example' },
    cssClass: 'custom-modal',
    showBackdrop: true,
    backdropDismiss: true,
    animated: true
  });

  return await modal.present();
}

2. Presenting Modal

Property Description Default Notes
component The component to be presented as a modal Required Must be a valid Ionic component or Angular/React/Vue component
componentProps Properties to pass to the component null Object containing key-value pairs of props
cssClass Custom CSS classes to apply to the modal null Can be a string or array of strings
showBackdrop Whether to show the backdrop true Set to false to hide the backdrop
backdropDismiss Whether to dismiss modal on backdrop tap true Set to false to prevent dismissal on backdrop tap
animated Whether to animate the modal true Set to false to disable animation
keyboardClose Whether to close the keyboard on modal open true Set to false to keep keyboard open

Example: Presenting a Modal in Ionic

import { ModalController } from '@ionic/angular';
import { MyModalComponent } from './my-modal.component';

constructor(private modalController: ModalController) {}

async presentModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent,
    componentProps: { value: 123 }
  });
  return await modal.present();
}
Note: The component property is required and must be a valid component that can be presented as a modal.
Warning: Make sure to await modal.present() to ensure the modal is properly displayed.

3. Dismissing Modal

Property Values Description
dismiss () Method to dismiss the modal and return data
dismissWithResult (data: any) Method to dismiss the modal and pass data back

Example: Dismissing Modal with Data

import { ModalController } from '@ionic/angular';

async dismissModal() {
  const modal = await this.modalController.create({
    component: MyComponent
  });
  await modal.present();

  const { data } = await modal.onDidDismiss();
  console.log('Modal dismissed with data:', data);
}

Example: Dismissing Modal Without Data

import { ModalController } from '@ionic/angular';

async dismissModal() {
  const modal = await this.modalController.create({
    component: MyComponent
  });
  await modal.present();

  // Dismiss without returning data
  await modal.dismiss();
}

4. Passing Data to Modal

Property Description Usage
data Data to pass to the modal component data: { userId: 123, userName: 'John' }

Example: Passing Data to Modal

import { ModalController } from '@ionic/angular';

async presentModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent,
    data: {
      userId: 123,
      userName: 'John'
    }
  });
  await modal.present();
}
Note: The data is accessible in the modal component via ionViewWillLoad or ngOnInit.

5. Receiving Data from Modal

Property Description Usage
data Data passed to the modal component Used in the modal's TypeScript file to access input data

Example: Receiving Data in Modal Component

<ion-content>
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Received data: {{ receivedData }}</p>
  </div>
</ion-content>

Example: Opening Modal with Data

import { ModalController } from '@ionic/angular';

constructor(private modalController: ModalController) {}

async openModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent,
    componentProps: {
      receivedData: 'Hello from parent'
    }
  });
  await modal.present();
}

6. Configuring Modal Options

Option Values Description
backdropDismiss true | false Whether to dismiss the modal when clicking the backdrop. Defaults to true.
cssClass string | string[] Additional CSS classes to apply to the modal element.
keyboardClose true | false Whether to close the modal when pressing the escape key. Defaults to true.
showBackdrop true | false Whether to show the backdrop behind the modal. Defaults to true.
swipeToClose true | false Whether to allow closing the modal by swiping. Defaults to false.
component Component The component to be displayed inside the modal.
componentProps any Properties to pass to the component.
animated true | false Whether to animate the modal. Defaults to true.
enterAnimation AnimationBuilder Custom animation for entering the modal.
leaveAnimation AnimationBuilder Custom animation for leaving the modal.

Example: Opening a Modal with Options

<ion-button (click)="openModal()">Open Modal</ion-button>

async openModal() {
  const modal = await this.modalController.create({
    component: MyComponent,
    cssClass: 'my-custom-modal',
    backdropDismiss: true,
    keyboardClose: true,
    swipeToClose: false
  });
  await modal.present();
}

7. Using Inline Modal

Property Description Default Notes
inline Boolean indicating if the modal should be displayed inline false When set to true, the modal is rendered within the current component instead of as a full-screen overlay
size Defines the size of the inline modal medium Options: small, medium, large, full
backdropDismiss Whether clicking the backdrop should dismiss the modal true Only applies when inline is true

Example: Basic Inline Modal

<ion-modal inline="true" size="medium">
  <ion-content>
    <h2>Inline Modal Content</h2>
    <p>This modal is displayed inline.</p>
  </ion-content>
</ion-modal>

Example: Modal with Custom Size

<ion-modal inline="true" size="large">
  <ion-header>
    <ion-toolbar>
      <ion-title>Large Inline Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <p>This modal has a large size.</p>
  </ion-content>
</ion-modal>

8. Implementing Swipe to Close

Property Values Description
swipeToClose true | false Enables or disables swipe-to-close functionality on modals.
backdropDismiss true | false Controls whether clicking the backdrop closes the modal.

Example: Basic Swipe to Close Setup

import { ModalController } from '@ionic/angular';

async openModal() {
  const modal = await this.modalController.create({
    component: MyComponent,
    swipeToClose: true,
    backdropDismiss: true
  });
  await modal.present();
}
Note: Swipe to close is only available in Ionic Angular and React. It does not work in Ionic Vue or Svelte.

9. Creating Fullscreen Modal

Property Description Default Notes
cssClass Custom CSS classes to apply to the modal null Useful for styling and theming
backdropDismiss Whether to dismiss modal on backdrop click true Set to false to prevent closing by clicking outside
keyboardClose Whether to close modal when keyboard is closed true Set to false to keep modal open when keyboard is dismissed
showBackdrop Whether to show backdrop behind modal true Set to false to hide backdrop
swipeToClose Whether to allow closing modal by swiping true Set to false to disable swipe-to-close

Example: Creating a Fullscreen Modal

import { ModalController } from '@ionic/angular';

async function openFullscreenModal() {
  const modal = await modalController.create({
    component: MyModalComponent,
    cssClass: 'fullscreen-modal',
    backdropDismiss: true,
    keyboardClose: true,
    showBackdrop: true,
    swipeToClose: true
  });

  await modal.present();
}
Note: The cssClass property can be used to apply custom styles to the modal, such as setting height: 100% or width: 100% for fullscreen behavior.
Warning: When using cssClass for fullscreen, ensure that the modal content is properly sized to fill the screen to avoid layout issues.

10. Handling Modal Lifecycle

Phase Event Description Code Example
Presenting ionModalWillPresent Fires before the modal is presented 
modal.addEventListener('ionModalWillPresent', () => {
  console.log('Modal is about to be presented');
});
Presented ionModalDidPresent Fires after the modal is presented 
modal.addEventListener('ionModalDidPresent', () => {
  console.log('Modal is now presented');
});
Dismissing ionModalWillDismiss Fires before the modal is dismissed 
modal.addEventListener('ionModalWillDismiss', (ev) => {
  console.log('Modal is about to be dismissed');
  // Access data from modal
  const data = ev.detail.data;
});
Dismissed ionModalDidDismiss Fires after the modal is dismissed 
modal.addEventListener('ionModalDidDismiss', (ev) => {
  console.log('Modal is now dismissed');
  // Access data returned from modal
  const data = ev.detail.data;
});
Note: Use ionModalWillDismiss to handle cleanup or data passing before modal dismissal.

Was this article helpful?

Related Cheat Sheets