NOTE: For angular 1.2.x support check
angular-1.2 branch or download the
0.4.x release of
angular-toastr was originally a port of CodeSeven/toastr. It could now show some differences with it.
The goal is to provide the same API than the original one but without jQuery and using all the angular power.
$ npm install angular-toastr
If you are not using npm (you should), you can use bower:
$ bower install angular-toastr
To use a CDN, you can include the next two lines:
Or you can grab the latest release and add both the
Note: If you add a script tag for angular-toastr, keep in mind that you need the
tpls version or the other depending if you want the default template or not (see below).
If you want animations, don't forget to add
toastr to your modules dependencies:
Toastr usage is very simple, by default it comes with four types of notification messages:
Apart from that you can customize your basic toasts:
If no toast is passed in, all toasts will be closed.
The second parameter is optional and will fallback to the configured timeOut.
It return the number of active toasts in screen.
A toast has a
isOpened flag to see whether it is opened or not.
This library has two parts, a
container and the
toasts you put in it.
To configure the
container you need to modify the
toastrConfig, for example:
Those are the default values, you can pick what you need from it and override with your values.
To customize a
toast you have two options. First, you can set a default option to be applied globally to all
toasts in the same way you modified the
Toasts have 3 different callbacks:
The second option is to pass a third parameter (or second if you don't need a title). Let see some examples:
Toast with custom HTML (available in both title and message):
Toast with a close button:
Toast with a custom button for apple fans:
A pinky custom style (you can also create here new types with
toast-pink is a custom class created for the occasion:
If you want to use the built-in template, you can use the
If you decide that you don't want to use the built-in one, you can always use
angular-toastr.js file and then providing your own template like this:
The important part here is to have a key named
templates/toastr/toastr.html. The module you run it is not important, you just need to do it after you load
NOTE: Due some limitations in Angular, you need to have your custom template cached before trying to use it.
If you want to build from master, you need to:
$ npm install -g gulp$ npm install$ gulp production
Grab the compressed files under
/dist and the dev files at
Q: Why can't I override the
positionClass in a toast? It gets ignored.
A: The toasts don't have a position, they are attached to a container and is that container who has the position set on the page. This will be changed in a future version.
All the credits for the guys at CodeSeven/toastr for creating the original implementation.
Mit License: http://www.opensource.org/licenses/mit-license.php