# Modals

• Inline Modal
• Controller Modal
• Closing the modal
• Layout Examples (HTML)
  • Header with title and buttons

# Inline Modal

<ion-content [fullscreen]="true" class="ion-padding">

    <ion-button id="open-modal">Open Modal</ion-button>

    <p>{{ message }}</p>

    <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">

        <ng-template>

            <ion-content class="ion-padding"> ... </ion-content>

            <ion-footer class="grid-0 cols-2">
                <ion-button slot="end" (click)="cancel()" fill="outline">Cancel</ion-button>
                <ion-button slot="end" (click)="confirm()" [strong]="true">Confirm</ion-button>
            </ion-footer>

        </ng-template>

    </ion-modal>

</ion-content>

# Controller Modal

Create the modal page and remove the automatically created route. For this example, we are going to create a user-profile modal.

ionic generate page user-profile

# 1. Import the newly crated UserProfilePage and ModalController

import { ModalController } from '@ionic/angular';
import { UserPage } from './user/user.page';

# 2. Inject the ModalController into the constructor

Injecting the ModalController into the page.ts constructor gives us access to the ModalController within the class.

# 3. Create an async method to display the modal passing in the component and componentProps

The component parameter defines the page/component that will be displayed in the modal

componentProps is where you pass values to the modal. The value is passed as an object that has a property and a value.

Don't forget to return modal.present(); to display the modal

async editProfile() {

    const modal = await this.modal.create({
        component: UserPage,
        componentProps: { editing: true }
    })

    modal.onDidDismiss()
        .then((res) => {
            // the magic that happens when the modal is closed
        });

    return modal.present();
}

# Call the modal with a click event

<ion-tab-button (click)="editProfile()">
    <ion-icon src="/assets/svg/user.svg"></ion-icon>
</ion-tab-button>

# Closing the modal

*.ts

cancel() {
    this.modal.dismiss(null, 'cancel');
}

*.html

<ion-button (click)="cancel()" >Cancel</ion-button>

# Layout Examples (HTML)

There is some quirky behaviour with the styling so you may need to play around to get the look and feel you want.

ion-content is intended to be used in full-page modals, cards, and sheets. If your custom dialog has a dynamic or unknown size, ion-content should not be used.

.ion-page uses display: flex; justify-content: space-between;

# Header with title and buttons

<ion-content class="ion-padding">

    <ion-button id="open-modal" expand="block">Open</ion-button>

    <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
        <ng-template>
            <ion-header>
                <ion-toolbar>
                    <ion-buttons slot="start">
                        <ion-button (click)="cancel()">Cancel</ion-button>
                    </ion-buttons>
                    <ion-title>Title</ion-title>
                    <ion-buttons slot="end">
                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
                    </ion-buttons>
                </ion-toolbar>
            </ion-header>

            <!-- only wrap in ion-content for full page modal -->
            <ion-card class="ion-padding"> ... </ion-card>

        </ng-template>
    </ion-modal>

</ion-content>