Show Native Toast Notifications In An Ionic 2 Mobile App

A popular way to display notifications within a mobile app is through Toast notifications.  Previously I demonstrated how to display these notifications using Ionic Framework 1, but with Ionic 2 being all the rage, I figured it would make sense to demonstrate how to do this again.

iOS has no true concept of a Toast notification like Android does, but using the great plugin by Eddy Verbruggen, we can make it possible in iOS.  This is the same plugin we make use of in the Ionic Framework 1 tutorial.

Lets create a fresh Ionic 2 project using the Command Prompt (Windows) or Terminal (Mac and Linux):

Two important things to note here.  You cannot add and build for the iOS platform unless you’re using a Mac.  You must also be using the Ionic CLI that supports building Ionic 2 applications.

The goal here is to make notifications that look like the following:

Ionic 2 Toast Notification Top Ionic 2 Toast Notification Middle Ionic 2 Toast Notification Bottom

This project will be using the Apache Cordova Toast plugin by Eddy Verbruggen.  To install it, execute the following from the Command Prompt or Terminal:

We can start coding now.  To keep things simple we’re just going to have a single screen with three buttons.  Each button will display the Toast notification in a different part of the screen.

Let’s start by opening the project’s app/pages/home/home.ts and changing it to look like the following:

A few important things to note here.  First we need to include the Platform dependency and set it in the constructor function.

Since we’re using the vanilla Apache Cordova plugin, it won’t come with TypeScript type definitions.  This means we’ll get compiler errors at some point.  To get past this, we can add the following line:

Then we create a showToast function that accepts a message and screen position parameter.  Because we’re using native plugins we need to make sure the application is ready before trying to use.  This is done by making use of the this.platform.ready().

When the application is ready, we can use the Toast plugin as defined in the official plugin README file.

With the logic file complete, lets shift our sight to the app/pages/home/home.html file for UI.  Open that file and change it to look like the following:

It is a simple UI with just three buttons.  Nothing fancy at all.

Now let’s say we didn’t want to use the vanilla Apache Cordova plugin.  We have an option to use Ionic Native in our project instead.  To include Ionic Native, import it like so:

Finally we can update the showToast method to reflect appropriately:

Notice we are now creating the Toast message a bit differently.  It is just two different ways you can do things with Ionic 2.

Conclusion

Using the Apache Cordova Toast plugin by Eddy Verbruggen, we were able to show Toast notifications in our Ionic 2 Android and iOS mobile application exactly as we did in Ionic Framework 1.  We didn’t do anything special to use the actual plugin, it was more just setup using Angular 2 and the new framework version.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Fedor Usakov

    Having trouble to attach to existing project on ES6…
    Everything works fine on a blank project wit TypeScript.
    Looks like plugin is not initialized properly – “toast is not defined”.
    I tried to uninstall and install again, tested different options like “ionic plugin add …” instead of “cordova plugin add …” , but no luck.
    Any suggestions – how to debug the issue?

      • Fedor Usakov

        Thanks a lot!
        I tried with adb and made few nobel-prize-worth of discoveries.
        First. I can not see any of Cordova logs in a logcat. I searched through and there was no any mentions of “Cordova” word in my adb logs…
        Second. By accident, while debugging network-availability plugin, I found out that was forcibly and brutally commented by ionic-platform-web-client witch I tried to install previously into my project, but failed. That was the core of the problem, and that is why some of the plugins haven’t worked.
        Third. HOW, BY GODS barcode-scanner-plugin managed to work without cordova,js?

        • It should not work without cordova.js. Sounds like you may have other issues.

  • If you get: Property plugin does not exist on type window, then do: “window[‘plugins’].YOURPLUGIN”.Yours sincerely, http://meshfields.de

    • I just updated this tutorial to use the latest version of Ionic 2. It shows how to do it with Apache Cordova or Ionic Native, so you have options.

      Best,