Toastier NPM | npm.io

Toastier

Toastier provides configurable toast notifications for your AngularJS application.

Installation

In order to install Toastier, make sure you have installed Node and npm on your machine.

npm install toastier

Usage

To use Toastier, simply add it as a dependency to your application:

(function() {
  "use strict";

  angular.module("app", ["toastier"]);
})();

Then, inject toastierService to any controller that requires a toast notification. The show method accept a config object in which you can define your toast message, label, position and duration.

toastierService.show(config)

config is a mandatory object that accepts four parameters:

(function () {
  "use strict";

  angular
    .module("app")
    .controller("toastierDemoController", toastierDemoController);

  function toastierDemoController(toastierService) {
    var vm = this;

    vm.action = action;

    function action() {
      toastierService.show({
        message: "This is an info message.",
        label: "info",
        position: "bottom-right",
        duration: 2000
      });
    }
  }
})();

message / messageKey mandatory
Type: String

message is the message to display.

(function () {
  "use strict";

  angular
    .module("app")
    .controller("toastierDemoController", toastierDemoController);

  function toastierDemoController(toastierService) {
    var vm = this;

    vm.action = action;

    function action() {
      toastierService.show({
        message: "This is an info message."
      });
    }
  }
})();

Toastier also supports Pascal Precht’s angular-translate. To use it, load angular-translate to your HTML document, and in your controller, define a messageKey instead:

(function () {
  "use strict";

  angular
    .module("app")
    .controller("toastierDemoController", toastierDemoController);

  function toastierDemoController(toastierService) {
    var vm = this;

    vm.action = action;

    function action() {
      toastierService.show({
        messageKey: "Your_Localized_String"
      });
    }
  }
})();

If you define both message and messageKey, only messageKey will be considered.

label optional
Type: String
Default: "info"

Toastier accepts four label values:

"info"
"success"
"warning"
"alert"

Each one maps to a CSS class that sets a background color for the toast. You can customize them by overriding the pre-defined SASS/LESS variables: t6r-info, t6r-success, t6r-warning and t6r-alert.

position optional
Type: String
Default: "bottom"

Toastier accepts eight position values: