Toaster

A factory to create toast

Toaster is a component to show an in-app notification, like a toast for android applications.

Example

Require Angular module toaster. If you need to change theme or css classes, you can define it inside module configuration like this:

angular.module("myApp", ['ovh-angular-toaster']).config(function (ToastProvider) {

    // CSS classes
    ToastProvider.setExtraClasses('messenger-fixed messenger-on-bottom messenger-on-right');

    // Graphic theme
    ToastProvider.setTheme('air');

    // Set duration
    ToastProvider.setHideAfter(42);
});

To add a notification, you had to inject Toast as dependency and use it like this example inside a controller

angular.module('myApp').controller('iLikeLicorn',[ 'Toast', function (Toast) {
    "use strict";

    Toast.success("Licorns eat toast?");

}]);

Toast can by targetted with an ID. So, you can update a toast on-the-fly, like this:

Toast.info('Loading...', {
    id: 42,
    hideAfter: false
});

$timeout(function () {
    Toast.success('Done!', {
        id: 42
    });
}, 2000);

Also, a main Toast fct returns the instance of the Toast created. Then you can play with it!

var msg = Toast.info('Hello!', {
    hideAfter: false
});

$timeout(function () {
    Toast.hide(msg);
    $timeout(function () {
        Toast.show(msg);
    }, 2000);
}, 2000);

Installation

Bower

bower install ovh-angular-toaster --save

NPM

npm install ovh-angular-toaster --save

Get the sources

    git clone https://github.com/ovh-ux/ovh-angular-toaster.git
    cd ovh-angular-toaster
    npm install
    bower install

Warning

By default, CSS from messenger dependency download fonts from google... Two themes are banned :

• air
• ice

Don't forgot to disable CSS loading!!!

Toaster include version of these themes without fonts dependencies. To avoid loading CSS file, you had to exclude theses files into your wiredep (in gruntfile.js), like this:

wiredep: {
  target: {
    ...
    exclude: [
        'bower_components/messenger/build/css/messenger-theme-air.css',              'bower_components/messenger/build/css/messenger-theme-ice.css']
  }
},

Features

• Show a notification with success, error, info or light mode.
• Can by update on-the-fly!
• Automatically hidden by default.
• Doesn't translate message by default. The best way is to translate before send message to Toaster.

Dependencies

• Messenger
• ngSanitize

API

Main functions

• Toast.success(message, parameters) show a success notification.
• Toast.info(message, parameters) show an information notification.
• Toast.error(message, parameters) show an error notification.
• Toast.light(message, parameters) show a light notification.

Params:

• message: message to show
• parameters: Object to configure lib use to show notification. Please report to Messenger repo documentation. Inside parameters, you can add all parameters from Messenger library: Messenger documentation

Returns:

• notification: the instance of the Toast.

Others functions

• Toast.infoWithInProgress(messageProgress, message, parameters) show a info notification with progress information. Return notification reference.
• Toast.update(notification, message, parameters) update message inside notification. Return operation status.
• Toast.show(notification) show a specific notification. Return operation status.
• Toast.hide(notification) hide a specific notification. Return operation status.
• Toast.hideAll() hide all notification. Return operation status.

You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!

Have a look in CONTRIBUTING.md

Run the tests

npm test

Build the documentation

grunt ngdocs

Related links

• Contribute: https://github.com/ovh-ux/ovh-angular-toaster/CONCONTRIBUTING.md
• Report bugs: https://github.com/ovh-ux/ovh-angular-toaster/issues
• Get latest version: https://github.com/ovh-ux/ovh-angular-toaster

License

See https://github.com/ovh-ux/ovh-angular-toaster/blob/master/LICENSE