Growl notifications for AngularJS demo page

Add notification

Welcome (TTL 5000)
Danger (TTL 6000)
Success (TTL 8000)
The message you wish to display.

Select a predefined type:

Or assign your own custom type:

The type of the message can be anything you like e.g. warning, error, succes, etc. In this example an alert-<type> CSS class is added to the notification so you can style the notifications with bootstrap styles.
Time in ms how long you want to display the notification. Default is 5000ms (5 seconds) but you can change it for each notification.

Output using directive

Example HTML output using the built-in growl-notifications directive:

Source code:
<div growl-notifications></div>

Output using custom markup

Example HTML output using your own custom markup in your view template:

Source code:
<ul class="list-unstyled">
  <li ng-repeat="(id, notification) in growlNotifications.notifications">
    <div class="alert alert-{{notification.type}}">
      <div ng-bind-html="notification.message"></div>
    </div>
  </li>
</ul>

Under the hood

Inspection of growlNotifications.notifications:

{{growlNotifications.notifications | json}}