Ionic-toast bower component for Ionic framework applications

1

I have designed a bower component ionic-toast, which can be used in any ionic framework application. Inspired from few other plugins like toast and ng-notify, which already exists for Angular JS.

No additional plugins required to use this plugin.

Please checkout the below Github repository for the bower component.

ionic-toast @ Github

You can have a look at ionic-datepicker and ionic-timepicker bower components, which i have created earlier.

##Introduction:

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

View Demo

##Prerequisites.

  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.

  1. 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. ` angular.module('mainModuleName', ['ionic', 'ionic-toast']) { // code here.. } ` 4) In your controller, inject 'ionicToast'. ` .controller('HomeCtrl', ['$scope', 'ionicToast', function($scope, ionicToast) { //code here }]) ` 5) In your template you can use like below ` Show Toast at top with close `
  1. In your controller you have to define a function like below to show the toast
    `
    $scope.showToast = function(){

ionicToast.show(‘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.

  1. In your controller you have to define a function like below to hide the toast
    $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 buttons
ionic-toast buttons320×568
ionic-toast top
ionic-toast top320×568

ionic-toast middle
ionic-toast middle320×568
ionic-toast bottom
ionic-toast bottom320×568

##Versions:

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 : rajeshwar.patlolla@gmail.com

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

facebook : https://www.facebook.com/rajeshwarpatlolla

paypal : rajeshwar.patlolla@gmail.com

3 Likes
2

Nice, do you can make the hiding timeout and close icon also configurable?
You often do not need a close button to hide the message and so on.

EDIT: sry i see you can set both in the show function :wink:

Good alternative to the cordova/phonegap toast plugin.
Maybe you can extend this to an ionic module --> with default styling depending on iOS, Android?

3

You don’t get the close button always. It completely depends on your need. If you wants to have a close button just give true to third argument. And even the time out is configurable. You can set as much as time upto 5 seconds.

ionicToast.show(message, position, stick, time);

I have made this component as a module only, which you have to inject in to your app ionic-toast. But coming to stylings, i am using custom CSS.

4

Can you add custom html with link targets in the toast messages? A common use case might be an “undo” link for an action that was just performed.

1 Like
5

Thanks @zapnap, for the suggestions. I will implement this feature in the next release.

6

Hi,

Handy component. You should also add a fade option so it will fade out like a native toast instead of instantly disappearing.

Good work!

Tim.

7

Thanks @tbro028, I will try to work on it, when ever i get some time out my schedule. You can expect few new features in the upcoming releases. If it is possible for you to add any new features, you can always make a pull request.

8

okay might get a chance to take a look tomorrow. Will let you know if I manage it.

9

Thank you so much @tbro028 …

10

Hi Everyone, i have release a new version(v0.2.0) of ionic-toast component. Please have a look at it, if you wish to use it.

11

Hi if you want to add a fadeout i have added it with animated.css,
you need to include animated css in your project and change the following:

  1. add an id to the toast div : “ionic-toast-fade” as follows:
    var toastTemplate = '<div class="ionic_toast" id="ionic-toast-fade" ng-class="ionicToast.toastClass" ng-style="ionicToast.toastStyle">' + '<span class="ionic_toast_close" ng-click="hide()"><i class="ion-close-round toast_close_icon"></i></span>' + '<span ng-bind-html="ionicToast.toastMessage"></span>' + '</div>';
  2. change the var toastTimeout to be:
    toastTimeout = $timeout(function () { var elem = document.getElementById("ionic-toast-fade"); var angElement = angular.element(elem); angElement.addClass("fadeOut"); $timeout(function () { toastScope.hide(); angElement.removeClass("fadeOut"); },1000); }, duration);
    Have Fun :slight_smile:
12

For those who are using the ionic-toast, you can checkout the bug fix in the master branch. I will plan a new release with few more fixes and features shortly.

13

Hi Everyone, i am trying to list all the ionic framework plugins in a single repository. I had spent lot of time in getting all these plugins into one location, which hopefully should save so much of time of people who like to find one. I have added as many as i can. If you feel that i missed any plugin, please feel free to make a PR or raise an issue with the details of the plugin.

Here you can find the list of all ionic plugins