Working with Toast Components

1. Creating Toast Notification

Property	Description	Default	Example
message	The message to display in the toast	''	`message: 'Operation completed successfully'`
duration	How long to display the toast (in milliseconds)	3000	`duration: 5000`
position	Position of the toast on screen	'bottom'	`position: 'top'`
color	Color theme of the toast	'primary'	`color: 'success'`
cssClass	Custom CSS classes to apply to the toast	''	`cssClass: 'custom-toast'`

Example: Basic Toast Notification

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

constructor(private toastController: ToastController) {}

async presentToast() {
  const toast = await this.toastController.create({
    message: 'Your changes have been saved',
    duration: 2000,
    position: 'bottom',
    color: 'success'
  });
  await toast.present();
}

Example: Toast with Action Button

async presentToastWithOptions() {
  const toast = await this.toastController.create({
    message: 'Item deleted',
    duration: 3000,
    position: 'top',
    color: 'danger',
    buttons: [
      {
        text: 'Undo',
        handler: () => {
          console.log('Undo clicked');
        }
      }
    ]
  });
  await toast.present();
}

Note: Toast notifications are non-modal and automatically dismiss after the specified duration.

2. Positioning Toast

Position	Description	Default
top	Displays toast at the top of the screen	false
center	Displays toast at the center of the screen	false
bottom	Displays toast at the bottom of the screen	true

Example: Setting Toast Position

<ion-toast
  message="Your changes have been saved"
  position="top"
  duration="2000">
</ion-toast>

Example: Center Positioned Toast

<ion-toast
  message="Operation completed"
  position="center"
  duration="3000">
</ion-toast>

3. Setting Toast Duration

Property	Values	Description
duration	`3000`	Duration in milliseconds before the toast auto-hides. Default is 3000ms (3 seconds).
duration	`0`	If set to 0, the toast will not auto-hide and must be manually dismissed.

Example: Setting Toast Duration

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

constructor(private toastController: ToastController) {}

async presentToast() {
  const toast = await this.toastController.create({
    message: 'Your changes have been saved.',
    duration: 5000 // Toast will disappear after 5 seconds
  });
  await toast.present();
}

4. Adding Toast Buttons

Property	Values	Description
buttons	`Array<ToastButton>`	Array of buttons to display in the toast

Example: Toast with Buttons

<ion-toast
  message="Your changes have been saved"
  duration={2000}
  buttons={[
    {
      text: "Undo",
      handler: () => {
        console.log("Undoing changes");
      }
    },
    {
      text: "Close",
      role: "cancel"
    }
  ]}
></ion-toast>

Note: The role property can be set to "cancel" to indicate that the button should close the toast without further action.

5. Configuring Toast Color

Property	Values	Description
color	`'primary'` \| `'secondary'` \| `'success'` \| `'warning'` \| `'danger'` \| `'light'` \| `'dark'`	Sets the color theme of the toast

Example: Setting Toast Color

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

async function showToast() {
  const toast = await toastController.create({
    message: 'This is a success toast',
    color: 'success',
    duration: 2000
  });
  await toast.present();
}

Note: The color property supports all Ionic color variants. Default is 'primary'.

6. Using Toast Icons

Property	Values	Description
icon	`string`	The icon to display in the toast. Can be a string name of an icon from Ionicons or a custom SVG path.
color	`string`	The color of the icon. Accepts standard Ionic color names like `primary`, `secondary`, `success`, etc.
size	`small` \| `medium` \| `large`	Sets the size of the icon. Defaults to `medium`.

Example: Toast with Icon

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

constructor(private toastController: ToastController) {}

async presentToast() {
  const toast = await this.toastController.create({
    message: 'Your changes have been saved.',
    icon: 'checkmark-circle',
    color: 'success',
    duration: 2000
  });
  await toast.present();
}

Example: Toast with Custom SVG Icon

async presentCustomIconToast() {
  const toast = await this.toastController.create({
    message: 'Custom icon toast',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"></path></svg>',
    color: 'primary',
    duration: 2000
  });
  await toast.present();
}

Note: When using a custom SVG icon, ensure it is properly escaped and sized for optimal display in the toast component.

7. Dismissing Toast Programmatically

To programmatically dismiss a toast, you can use the dismiss() method on the toast instance. This method allows you to close the toast manually at any time.

Method	Description	Parameters
dismiss()	Closes the toast programmatically	None

Example: Dismissing Toast

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

async function showToast() {
  const toast = await toastController.create({
    message: 'This is a toast',
    duration: 3000
  });

  await toast.present();

  // Dismiss the toast after 2 seconds
  setTimeout(() => {
    toast.dismiss();
  }, 2000);
}

8. Handling Toast Events

Event	Description	Parameters
ionToastDidPresent	Fired when the toast is presented	`event.detail`
ionToastDidDismiss	Fired when the toast is dismissed	`event.detail`

Example: Listening to Toast Events

const toast = await toastController.create({
  message: 'Hello World',
  duration: 2000,
});

toast.addEventListener('ionToastDidPresent', () => {
  console.log('Toast presented');
});

toast.addEventListener('ionToastDidDismiss', () => {
  console.log('Toast dismissed');
});

await toast.present();

9. Stacking Multiple Toasts

When displaying multiple toasts, Ionic allows stacking them vertically. Each toast is positioned at the bottom of the screen and will stack on top of each other.

Property	Values	Description
position	`'top'`, `'center'`, `'bottom'`	Determines where the toast is positioned on the screen
duration	`number`	Time in milliseconds before the toast is automatically dismissed
closeButtonText	`string`	Text for the close button (if enabled)
cssClass	`string`	Custom CSS class for styling the toast

Example: Stacking Multiple Toasts

<ion-toast-controller></ion-toast-controller>

<script>
  const toastController = document.querySelector('ion-toast-controller');

  async function showToast(message, position = 'bottom') {
    const toast = await toastController.create({
      message: message,
      position: position,
      duration: 3000
    });
    await toast.present();
  }

  // Show multiple toasts
  showToast('First toast');
  showToast('Second toast');
  showToast('Third toast');
</script>

Note: Toasts are displayed in the order they are created. If you want to control stacking, manage their creation timing or use a custom toast container.

10. Using Swipe to Dismiss

Property	Values	Description
swipeToDismiss	`true` \| `false`	Enables or disables swipe-to-dismiss functionality on toast components.
dismissOnSwipe	`true` \| `false`	Controls whether the toast is dismissed when swiped.

Example: Swipe to Dismiss Configuration

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

async function showToast() {
  const toast = await toastController.create({
    message: 'Swipe to dismiss me',
    swipeToDismiss: true,
    dismissOnSwipe: true,
    duration: 3000
  });

  await toast.present();
}

Note: The swipe gesture is supported on mobile devices and touch-enabled interfaces. On desktop, the toast will not respond to swipe gestures.