Ionic 5 Toast Notification Usage and Customization Tutorial

Ionic 5 Angular toast notification tutorial; In this step by step example, we describe how to gracefully show notification in the Ionic 5 application using the ToastConrtoller component.

Adding toast component in Ionic is not just easy but also great from a user-experience perspective. In this tutorial, we will show you how to use ToastController to create Toast to display notifications and customize Toast that comprises rotating position within the viewport, changing Toast displaying duration and closing the ionic toast notifications.

Let us dive deep to comprehend the meaning of Toast and what it does in the Ionic platform.

A Toast is a user-interface element for displaying notification or message and primarily used in modern web and mobile applications. Ideally, it is added when the user needs to inform about specific feedback about an event or show a system message.

In an application, Toast manifests from the top position. However, the position can be altered through its own API mechanism to enhance the interactivity.

Ionic 5 Angular Toast Notification Example

  • Step 1: Set Up Ionic Environment
  • Step 2: Show Toast Message in Ionic
  • Step 3: Close or Dismiss Toast in Ionic
  • Step 4: Using Properties and Method in Toast
  • Step 5: Customize Ionic Toast UI
  • Step 6: Test Toast Component

Set Up Ionic Environment

So, open command prompt and use the below command to install Ionic CLI (command line interface):

npm install -g @ionic/cli

Install a fresh blank Ionic Angular application:

ionic start toasts-demo blank --type=angular

Head over to app’s root:

cd toasts-demo

Show Toast Message in Ionic

Importing ToastController lets you access the handy functions to create and show Toast notification messages in ionic, so we will wrap the create() toast method inside a custom function.

Update home.page.ts file:

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

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

export class HomePage {

  constructor(public toastCtrl: ToastController) {}

  showToastMsg() {
    this.toastCtrl.create({
      message: 'Tiny Toast!',
      duration: 1800
    }).then((toastRes) => {
      console.log(toastRes);
      toastRes.present();
    });
  }  

}

Create a button and bind function with click event to call the Toast, hence update home.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Toast Notification Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <ion-button color="primary" (click)="showToastMsg()">Show Message</ion-button>

</ion-content>

Close or Dismiss Toast in Ionic

The dismiss() method is accessible through the ToastController module and helps close or dismiss the toast popup.

You need to update HTML and TypeScript templates simultaneously:

Update home.page.ts file:

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

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

export class HomePage {

  constructor(public toastCtrl: ToastController) {}

  // Show Toast
  showToastMsg() {
    this.toastCtrl.create({
      message: 'Tiny Toast!',
      duration: 1800
    }).then((toastRes) => {
      console.log(toastRes);
      toastRes.present();
    });
  }  

  // Close Toast
  dismissToast() {
    this.toastCtrl.dismiss();
  }

}

Update home.page.html file:

<ion-button color="primary" (click)="showToastMsg()">Show Message</ion-button>

<ion-button color="danger" (click)="dismissToast()">Close Toast</ion-button>

Using Properties and Method in Toast

Next, we will show you various properties and methods comprises in create() method. You can add animation in ionic toast, add buttons, change the color of toast, add custom CSS class, toast duration, header in toast, toast message, change position, not only but also make toast translucent.

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

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

export class HomePage {

  constructor(public toastCtrl: ToastController) {}

  // Customize Toast
  showToastMsg() {
    this.toastCtrl.create({
      header: 'Hello Admin!',
      message: 'Good morning user!',
      position: 'bottom', // "top", "bottom", "middle"
      cssClass: 'toast-truce',
      duration: 2200,
      color: 'tertiary', // "primary", "secondary", "success", "tertiary", "warning", "danger", "light"
      mode: 'ios', // "ios" | "md"
      translucent: false, // true | fasle
      buttons: [
        {
          side: 'end',
          icon: 'alert-circle-outline',
          handler: () => {
            console.log('');
          }
        }, {
          side: 'end',
          text: 'Close',
          role: 'cancel',
          handler: () => {
            console.log('');
          }
        }
      ]
    }).then((toast) => {
      toast.present();
    });
  }

}

Customize Ionic Toast UI

In this step, we will use the cssClass property to add the custom styling in the toast UI component. Declare a class name inside the create() method. For instance, we named the class ‘toast-truce’ and add the background color, border into it to change the aesthetics of the toast.

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

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

export class HomePage {

  constructor(public toastCtrl: ToastController) {}

  // Custom Toast Style
  showToastMsg() {
    this.toastCtrl.create({
      header: 'Hello Admin!',
      message: 'Good morning user!',
      cssClass: 'toast-truce',
    }).then((toast) => {
      toast.present();
    });
  }  
 
}

Now, head over to global.scss file, place the recommended CSS code to spruce up the Toast UI.

.toast-truce {
    --background: blue;
    --color: white;
    --border-color: green;
    --border-width: 6px;
    --border-style:solid;
}

Test Toast Component

Lastly, you can test the app based on your choice; you may execute a command to add the platform of your choice.

ionic cordova platform add ios

ionic cordova platform add android

Then, use command to generate build:

ionic cordova build ios

ionic cordova build android

Invoke app on the virtual or actual device:

ionic cordova run ios -l

ionic cordova run android -l

Integrate Toast Notification in Ionic

Conclusion

Toast notifications or messages are super awesome when you need to grab the user’s attention to show the vital message. Through this guide, we got a chance to learn how to integrate Toast in the Ionic app, not just that. But, we have also explored how to customize the Ionic Toast using toast controller properties and methods effortlessly.