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…

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

 

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

 

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

 

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

 

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


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

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

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

platforms\android\build\outputs\apk

 

Leave a Reply

Your email address will not be published. Required fields are marked *