Show Native Toast Notifications Using Ionic Framework

There are often times where you need to display messages to your users inside your Ionic Framework Android and iOS application.  If you’ve been using Ionic for a while, you’re already familiar with the $ionicPopup feature, but what happens if you don’t want to bother the user with interaction?

Using the Toast plugin by Eddy Verbruggen for Apache Cordova, we are able to create native Toast notifications for both iOS and Android that require no user interaction to close.

Ionic Toast Bottom Ionic Toast Center Ionic Toast Top

If you’re looking for how to show Toast notifications in Ionic 2, visit my here.

Let’s start things off by creating a new Android and iOS Ionic Framework project from scratch.  From the command line, run the following:

Remember, if you plan to add and build the iOS platform you must be using a Mac computer.  Otherwise, just stick with Android.

Now we need to add the Toast plugin into our project.  This can be done by running the following command from your command prompt:

To make our lives a little easier, we are going to make use of the ngCordova extension to show our Toast notifications.  By including ngCordova, we can better leverage the power of AngularJS for various plugins such as Toast.

Start by downloading the latest ngCordova release and placing ng-cordova.min.js in your projects www/js directory.

Crack open your index.html file and include the JavaScript library above cordova.js like below:

We also need to include it in our app.js file, so open it and modify angular.module to look like the following:

Now for the fun part.  Let’s go ahead and create a controller and method for handling Toast notifications.  You’ll probably want it to look something like this:

The duration and location parameters can accept one of numerous predefined values.


Duration ValueDescription
longShows the Toast notification for approximately five seconds
shortShows the Toast notification for approximately two seconds

Location ValueDescription
topShows the Toast at the top of the screen
centerShows the Toast in the center of the screen
bottomShows the Toast at the bottom of the screen

You can now use this Toast method by doing something like the following in your index.html file:

Just like that, you’ve got native Toast notifications in your Ionic Framework mobile application.

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.

  • Debi

    Hi Nic,
    Do you mind if I translate your blog into Chinese ???

  • Hello Nic, do you have some example about status bar notification?

    Tks,

    Mendez

    • Hi Mendez,

      I don’t currently have an example for this, but in the future, please send all tutorial requests to my Twitter or email.

      Thanks,

  • Cool, I was using old fashioned alert(), Its time to get toast on work.

    Well have you written any article on Push Notifications?
    Get me a link if there is any.

    Thanks.

    • Glad you liked my article. I do not have anything yet on Push Notifications, but it’s coming 🙂

  • Marcello Colombo

    Hy Nic, do know if possible intercept click on it??

    • To my knowledge this is not possible because it uses the native Toasts. Had it been using a JavaScript / CSS clone, maybe, but not in native.

      Regards,

  • Luis Troya

    Is there a way to add some style to that toast?

    • It uses native code and to my knowledge it is not able to be styled. You may want to raise a ticket with the plugin developer to inquire further.

      Regards,

  • tosrn

    Hello Nic and thanks for this article! Quick question: how can I handle multiple toasts if I want the next toast to replace the one being shown? I tried using window.plugins.toast.hide(); but it hides ALL TOASTS (including the next one). Any idea?

    • I don’t think you can do that. It uses native Toast notifications and I’m not sure if they allow such a thing. You may want to look for a pure JavaScript implementation for Toast rather than native for such a task.

      Regards,

  • anshul

    Hey Nic ,

    while running the app in windows I am getting an error ‘Cannot read property ‘toast’ of undefined’

    can you please help me with this.

    regards,
    Anshul

    • An Phu

      I got the same issue. Have you figured that out?

    • What do you mean when you say “while running the app in windows”? Are you talking about Windows Phone? Do you suffer from this?:

      https://www.thepolyglotdeveloper.com/2015/02/properly-testing-ionic-framework-mobile-application/

      Regards,

      • anshul

        no not in windows phone I am running it on localhost and its showing the error cannot read property toast of undefined

        edit: I read your blog mentioned in the comment, so i guess the error is coming because I am running it as a web project but if I build its apk it will run properly right

        • Yes it should run correctly when you build the APK for real.

          You should NEVER test your mobile application as a web project. You’re building mobile apps. Just because you’re using web technologies, doesn’t make it a web compatible app.

          Best,

          • anshul

            okay, thanks a lot nic for all your articles, I have learned a lot from your ionic tutorials 🙂

          • No problem!

  • Liu Tsz Ki

    Hi,

    when I running on browser, I get an error ‘TypeError: n.plugins is undefined’. I have already download with the latest ng-cordova.min.js.

    can you please help?

    • Native plugins do not work in the browser. You can only use them via a device or simulator.

      Regards,

      • Abdul Aleem Akhund

        @Liu, if you want to check on browser.

        you can use below command:

        window.plugins.toast.showShortCenter(“Toast Message”);

  • rejinthala manoj

    when i run my app in ios device it will not showing any toast message

  • rejinthala manoj

    HI,
    When i run my app in ios device it will not showing any toast message but it displaying toast message in android please provide any solution.thanks in advance.

    regards
    manoj

  • rejinthala manoj

    Hi Nic,
    my app shows toast message when i generate apk for android but i didn’t get any toast message when i used same app in ios.please provide any solution for that.thanks in advance

    regards
    manoj

  • Jorge Cacho

    I’m getting an error on iOS emulator. Everytime I try to show a Toast notification the app crashes (I’ve tried to debug the error with Safari developer tools but the app crashes and nothing is shown).

    I have used more ngCordova plugins in my app (both on Android and on iOS plattforms) and they are working .. Does anything special need to be installed/configured for iOS?

    • If Safari developer tools is crashing you probably want to inspect the project via Xcode. If the project is crashing, there will be logs. I won’t be able to help you without them.

      Best,

      • Jorge Cacho

        Maybe I have explained myself bad. What is crashing is ionic app, not Safari. The app crashes so Safari developer tools get dettached from that process.

        Does Safari or Ionic write logs, where can I find them?

        THANKS

        • I suggest you troubleshoot via Xcode then

          • Jorge Cacho

            Thanks! Xcode showed an EXC_BAD_ACCESS error on cordova-plugin-app-event plugin code.

            It seems Toast plugin hasn’t any dependence from cordova-plugin-app-event plugin but Local Notification plugin yes. In my app I am using de.appplant.cordova.plugin.local-notification so cordova-plugin-app-event is also installed and the issue appears when executing Toast plugin ;-(

            I don’t know if anyone has been able to use both Toast and Local Notification plugins installed on the same app and get them work on iOS platform (on Android there is no collide) …

          • Are you trying to show a toast when the notification triggers? You may want to contact the plugin developers to both these plugins.

          • Jorge Cacho

            No, toast messages happen at different moments than notifications … I am contacting both developers. Thanks!!

  • Agam Banga

    Its working fine in android but not on ios. i am using linux and checking the app via ionic view. What could be the issue?

    • The problem is probably Ionic View. Plugins have issues with it.

      I suggest you buy a Mac if you wish to do iOS development because all the build services out there are going to be sub-par.

      Best,

  • اهلاوى وافتخر

    good work thanks for all

  • Anna N

    Hi Nic,
    I have a problem with Windows Phone 8.1 platform. Toasts work well on ios and android but not on WP8. I’m testing it on a device and log says that Toast is showing but it doesn’t. Have you got any idea what could be the issue?

  • devoraf

    hi Nic, how can I block the screen while the toast is being displayed, so no other elements can be typed/clicked? thanks.

    • That kind of defeats the purpose of a toast notification. If you want a blocking notification, you might consider a pop-up or loading indicator. Something that makes it obvious the users device didn’t freeze.

      • devoraf

        but when using the toast with the close button option, shouldn’t there be an option to block the screen as well?

        • The close button is there for people to dismiss them early and not have to wait for them to auto close and free up screen space.

          I don’t make the rules on this one. If you truly want to block the screen, which as a user I’m never a fan of, then your have to use a different solution.

          • devoraf

            ok. thanks.
            I have another question about floating label:
            when using floating ion-label with RTL direction, the floating label does not being aligned to the right, but somewhere in the middle, when typing text in the input field.
            is there any solution for it?
            see code below:
            {{ usrTitle }} {{ pswTitle }}

          • That is unrelated to the topic of this article. I’m going to have to ask you to comment on a post where it is relevant or take it to the forums.

            Best,

          • devoraf

            sorry, i couldn’t find any relevant post.

  • Periyasamy M

    when i use toast i getting this error

    TypeError: Cannot read property ‘toast’ of undefined
    at Object.show (ng-cordova.js:6691)
    at Scope.$scope.show (controllers.js:53)
    at fn (eval at compile (ionic.bundle.js:26457), :4:254)
    at ionic.bundle.js:62386
    at Scope.$eval (ionic.bundle.js:29158)
    at Scope.$apply (ionic.bundle.js:29257)
    at HTMLButtonElement. (ionic.bundle.js:62385)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16583)
    at triggerMouseEvent (ionic.bundle.js:2948)
    at tapClick (ionic.bundle.js:2937)(anonymous function) @ ionic.bundle.js:25642

    how to i solve this problem? i installed the plugin also.

    • Periyasamy M

      I run mobile i got the answer…

    • all plugins with cordova to access native api should be done in real device or emulator

  • Avi Swarnkar

    ho can we change color of toast

    • To my knowledge Native toasts cannot change color. You’d have to build your own HTML toast to accomplish this.

      • Avi Swarnkar

        thanks nic for reply but i got we can change color with the help of CSS
        example.ts——————->>>
        let toast = this.toastCtrl.create({
        message: ‘Sign in’,
        duration: 1500,
        position: ‘top’,
        cssClass: “toast-success”,
        });
        toast.present(toast);
        let toast = this.toastCtrl.create({
        message: ‘Wrong email or password, try again.’,
        duration: 1500,
        position: ‘top’,
        cssClass: “toast-error”,
        });
        toast.present(toast);
        example.css——————>>>
        .toast-success {

        div{
        background-color:#0F9D58 !important;
        text-align: center;
        font-weight: bold;
        }
        }
        .toast-error {
        div{
        background-color:#CA330A !important;
        text-align: center;
        font-weight: bold;
        }
        }

  • wiw ~ ➹

    Please invite @thebangtangirl:disqus to discussions. Thank you. ^_^