Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Show Native Toast Notifications Using Ionic Framework

TwitterFacebookRedditLinkedInHacker News

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 Framework Toast Notifications

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:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

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:

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

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:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

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

angular.module('starter', ['ionic', 'ngCordova'])

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:

ionicApp.controller("ExampleController", function($scope, $cordovaToast) {

    $scope.showToast = function(message, duration, location) {
        $cordovaToast.show(message, duration, location).then(function(success) {
            console.log("The toast was shown");
        }, function (error) {
            console.log("The toast was not shown due to " + error);
        });
    }

});

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:

<ion-content ng-controller="ExampleController">
    <div class="padding">
        <button class="button" ng-click="showToast('testing the bottom', 'long', 'bottom')">Long Bottom</button>
        <button class="button" ng-click="showToast('testing the top', 'short', 'top')">Short Top</button>
        <button class="button" ng-click="showToast('this is a test', 'long', 'center')">Long Center</button>
    </div>
</ion-content>

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

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

Search

Follow Us

Support This Site