ionic toast

ionic toast

'ionictoast' bower component for ionic framework applications




Member since 2014


iOS, Android  
6 years ago
6 years ago


This is an ionic-toast bower component which can be used with any Ionic framework's application.

View Demo


1) node.js, bower and gulp.

##How to use:

1) In your project repository install the ionic-toast using bower

bower install ionic-toast --save

This will install the latest version released.

2) Then you can see the following directory structure see in your project folder

Give the path of style.css, and ionic-toast.js in your index.html file.



3) In your application module inject the dependency ionic-toast, in order to work with the ionic toast.

javascript angular.module('mainModuleName', ['ionic', 'ionic-toast']){ // }

4) In your controller, inject 'ionicToast'.

javascript .controller('HomeCtrl', ['$scope', 'ionicToast', function($scope, ionicToast) { //code here }])

5) In your template you can use like below

html <button class="button button-block" ng-click="showToast()">Show Toast at top with close</button>

6) In your controller you have to define a function like below to show the toast

javascript $scope.showToast = function(){ <!--, position, stick, time); -->'This is a toast at the top.', 'top', true, 2500); };

The arguments are as follows. The order of arguments should not be changed.

a) message is the first argument, which takes any string message.

b) position is the second argument, which takes on of the three values(top, middle, bottom).

c) stick is the third argument, which takes either true or false.

  • If the value is true, the toast will not close automatically. It will be closed once you click on the close button.
  • If the value is true, the toast will close automatically, after the given time.

d) time is the fourth argument, which takes time in milliseconds. If the value is greater than 5000, then it will be considered as 5000(5 seconds) only.

7) In your controller you have to define a function like below to hide the toast

javascript $scope.hideToast = function(){ ionicToast.hide(); };

##Screen Shots:

Once you are successfully done with the above steps, you should be able to see the below screen shots. I have used three buttons here.

The first screen shot shows only the buttons before clicking on them. Once you click on the button you should see the remaining screen shots.

ionic-toast buttonsionic-toast topionic-toast middleionic-toast bottom


1) v0.1.0

The whole ionic-toast component functionality has been implemented, and it can be installed with the command bower install ionic-toast --save

1) v0.1.1

Bug Fix

##License: MIT

##Contact: gmail :

github :

twitter :

facebook :

paypal :