How to Show Toast Messages Like Native Android in Ionic App

When using the Ionic framework, we always have the option to show alerts or other confirm dialogues. But sometimes there are requirements to show messages to a user which involves no user interaction. Like we see in a native android app there is a Toast message which informs a user about a message then simply goes aways after some time .

In PhoneGap or Cordova, we have one plugin which will do the same thing for us in a Hybrid environment as well. Here we will use Toast-PhoneGap-Plugin use integrate native like Toast or Info messages in our app.

Let’s begin…

Also Read: Ionic 4 | Show Native like Toast Messages in Ionic Application in 2 Steps Without Any Plugin

Step 1 – We will create new test app by running below commands in CLI.

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

Step 2 – Now we will add Toast plugin in our project by running following command.

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

Step – 3 – To make implementation easier we will include ngCordova in our index.html page

Download ngCordova from this link https://github.com/driftyco/ng-cordova/releases

We need to include this in our HTML

<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">

Step 4 – Now we need to inject dependency in our app.js

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

Step 5 – Let’s start using it We will create a common function in the main controller like as follows

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);
        });
    }
 
});

Now where ever we need to show message we will call the following function with options. for example

$scope.showToast('Enter Username', 'long', 'bottom');

These are some options which we can use:

Duration: long, short

Position: top, center, bottom

Note: as we added ngCordova, this toast will only work in device Not on web/ desktop.

So to just build your app by running below CLI command then import .APK file in your mobile to test your added Toasts

ionic platform add android
ionic build android

After running both above commands, you will get .APK file at this location

platforms\android\build\outputs\apk

Category: Ionic Framework

How to Show Toast Messages Like Native Android in Ionic App

Leave a Reply Cancel reply