ionic
  1. ionic-modal
PreviousNext

Ionic Modal

Modals are a common UI element used in mobile applications to display additional content or user input. Ionic provides a simple and easy-to-use modal component that can be used to add modals to any Ionic app.

Syntax

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

<ng-template #myModal>
  <ion-header>
    <ion-title>
      Modal Title
    </ion-title>
  </ion-header>
  <ion-content>
    Modal Content
  </ion-content>
</ng-template>

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: MyModalComponent,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

}

@Component({
  selector: 'app-my-modal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>
          {{ title }}
        </ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="dismiss()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      {{ content }}
    </ion-content>
  `,
})
export class MyModalComponent {

  title: string;
  content: string;

  constructor(private modalController: ModalController, private navParams: NavParams) {
    this.title = this.navParams.get('title');
    this.content = this.navParams.get('content');
  }

  async dismiss() {
    await this.modalController.dismiss();
  }

}

Example

In this example, we have a button that triggers the opening of a modal when clicked. The modal has a title and content specified by the component and can be closed using the "Close" button. We achieve this by creating a home page component that uses the modal controller to open the modal, and a separate component to define the modal itself.

Output

The output of this example will be a modal that is displayed on top of the existing content when the "Open Modal" button is clicked. The modal will contain the specified title and content, and can be closed when the "Close" button is clicked.

Explanation

To create an Ionic modal, we define a new component that represents the modal content. We then use the ModalController service provided by Ionic to create a new modal instance and present it to the user. The modal component can pass data to the modal by specifying component props, and it can be dismissed using the modal controller.

Use

Ionic modals can be used for a variety of purposes, such as:

  • Displaying additional content or options when a user interacts with a page
  • Collecting user input for specific actions or tasks
  • Alerting the user of critical information or actions

Important Points

  • Ionic modals are a simple and effective way to add modal functionality to an Ionic app.
  • Modal components can be easily defined and customized to fit the specific needs of a project.
  • Modals can be used for a variety of purposes, such as displaying additional content, collecting user input, or alerting the user.

Summary

Ionic modals are a useful tool for adding modal functionality to an Ionic app. By defining a custom modal component and using the ModalController service provided by Ionic, we can easily create and present modals to the user. Modals can be useful for displaying additional content, collecting user input, or alerting the user, and they can be customized to fit the specific needs of a project.

MenusRefresher
Published on: