Toast Notification

ionic-v1
1

I think a toast could be handy, duration and position could options.

Similar to this: http://developer.android.com/guide/topics/ui/notifiers/toasts.html

1 Like
2

I’ve been using this: https://github.com/jirikavi/AngularJS-Toaster

It doesn’t look like Android toasts out of the box but it should be pretty easy to customize if that’s the look you’re after.

3

I think there is a cordova plugin which does it:

4 Likes
4

Hi, thanks for your suggestions, appreciate there are alternatives but I think it should be part of the framework.

For instance I could roll my own Loading overlay but why when Ionic provides me with one? Toast is a standard UI feature (especially in the Android world) so Ionic should have the equivalent (in my opinion of course!).

1 Like
5

I like it!

Planned it for post-1.0 (almost everything until 1.0 is bug fixes).

6 Likes
7

Any Update on this? Something In the line of http://codeseven.github.io/toastr/demo.html will be handy with themes similar to the Header bar colours.

8

I also wanted a toast feature built-in, so I looked through the source code, and it looks like $ionicLoading can be used to sort of do what I want like this:

$ionicLoading.show({ template: 'Item Added!', noBackdrop: true, duration: 2000 });

This shows the text with no backdrop and automatically hides it after 2 seconds.

Just thought I’d share.

10 Likes
9

this works like charm. Only if it had parameters of position it would have been awsome.

10

I’m currently using $cordovaToast from ngCordova, which has positioning options.

11

Another one I’ve tried is creating an ionic action sheet without buttons.

http://ionicframework.com/docs/api/service/$ionicActionSheet/

It looks pretty good on a phone but it’s too small on a tablet for my liking. If the CSS is modified a lot it’d look a lot nicer. I’d love to go for a look like this for toasters and snackbars:

http://www.google.com/design/spec/components/snackbars-toasts.html

But haven’t had the time to write some CSS for it.

1 Like
12

Thanks for this!
I added a PhoneGap plugin, and use $ionicLoading as a fallback.

I’ve packaged some things (toast, loading, etc.) to a service ‘UI’ to be used in all my projects. Below a skeleton of the actual:

.service('UI', function($http, $window, $q, $ionicLoading, $timeout){

  this.toast = function(msg, duration, position){
    if(!duration)
        duration = 'short';
    if(!position)
        position = 'top';

    // PhoneGap? Use native:
    if($window.plugins){
        if($window.plugins.toast)
            $window.plugins.toast.show(msg, duration, position,
                function(a){}, function(err){})
        return;
    }
    
    // … fallback / customized $ionicLoading:
    $ionicLoading.show({
        template: msg,
        noBackdrop: true,
        duration: (duration == 'short' ? 700 : 1500)
    });

  }
...

Add this to css to make the loading look like a toast placed at the top on Android. Add in some extra classes and triggers to have it programmatically placed top/middle/bottom - just like the plugin has. Shall add that next.
Would be awesome to have toast as a component in Ionic, though…

.loading-container{
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  padding-top: 54px;
  .loading{
	border-radius: 30px;
  }
}

The outcome:

image
toast.png716×1281 14.1 KB

5 Likes
13

Sorry for the n00b question, but if cordova.js is not available during development (as per the comment above cordova.js when you start building an app from a template), how do we use the Cordova Toast plugin in development?

14

Deploy it to an actual device or emulator to test!

15

Thanks! I ended up figuring this out after a little digging!

1 Like
16

I was been searching for a toast notification plugin for my project. I have created a bower component for toast. Please have a look at the bower component i have created. I think it might help you.

5 Likes
17

Thanks for that @rajeshwarpatlolla

18

This is my favorite one I’ve seen: http://tamerayd.in/ngToast

1 Like
19

I tried this ngToast and almost everything works great i’m only having problem with animations at the moment. I configure the toast like this:

 ngToast.configure({
        verticalPosition: 'bottom',
        horizontalPosition: 'center',
        maxNumber: 1,
        animation: 'slide'
    });

When serving this and triggering a toast everthing works fine but when i try on the emulator the slide animation looks alright when it slides in but when it’s suppose to slide out it just disappears. Have you had any similar problems with this ?

20

This is very simple and nice !!
Thank you @rajeshwarpatlolla

21

@Taehwa, thanks for using and you are welcome.