advanced usage

Advanced Usage

###Default Configuration

You can override the default options for all notifications by using the config method. None of these options are required. (For available options, check the definitions below.)

ngNotify.config({
    theme: 'pure',
    position: 'bottom',
    duration: 3000,
    type: 'info',
    sticky: false,
    html: false
});

Default configuration options can be set during the run() block. If your app utilizes a global controller, the config options could be set there just as well. For a discussion and working example on this topic, checkout this comment.

###Individual Configurations

You can also pass an object of options to individual notifications. You can pass through any combination of our available options here as well. (For available options, check the definitions below.) For example:

ngNotify.set('Your first message.', {
    position: 'top',
    sticky: true
});

ngNotify.set('Your second message.', {
    type: 'error',
    duration: 2000
});

ngNotify.set('Your third message.', 'error'); // Original use case still works, too.

ngNotify.set('Your <i>fourth</i> message.', {
    theme: 'pitchy',
    html: true
});

###Sticky Notifications

Sticky notifications allow you to set a persistent notification that doesn't fade away. To do this, simply set the sticky attribute to true:

ngNotify.set('This is sticky.', {
    sticky: true
});

This will give the user the option of closing the notification themselves. If you need to dismiss a notification manually, you can do so with the dismiss method like this:

ngNotify.dismiss();

Any time a notification is set to sticky, the duration attribute will be ignored since the notification will not be automatically fading out.

###HTML Notifications

HTML notifications will allow you to display messages with HTML content in them. To do this, you'll need to set the html attribute to true:

ngNotify.set('This has <b>HTML</b> content!', {
    html: true
});

You can also set HTML notifications to be enabled for all of your notifications by adding it the ngNotify config like so:

ngNotify.config({
    html: true
});

In order for HTML notifications to display, you are required to include the ngSanitize script in your app (eg, via Google CDN, Bower, or code.angular.org). There's no need to add it as a dependency to ngNotify. If ngNotify has found the ngSanitize script, it will add it as a dependency to the ngNotify module dynamically. Once included, you just need to toggle the html attribute to true and the module will handle the rest.

If you don't have ngSanitize included and you do set html to true, ngNotify will gracefully degrade back to the default message display and print a debug message to remind you in your browser's console.

###Roll Your Own

There are two additional methods that allow you to create your own types and themes.

#####Custom Notification Types

Creating a custom type will allow you to add additional types of notifications to use throughout your application. To create a new type, use the addType method. The first param is the name you'll use to reference your new type. The second param is the class you'll use to style your new notification type.

ngNotify.addType('notice', 'my-notice-type');

Then you can set any of your notifications up to use that type as you would any other, triggering it by using the name you gave it.

ngNotify.set('This notification is using our new type!', 'notice');

To style your new type, pick a color you'd like to use and set it to the background color of your new style.

.my-notice-type
    background-color: #ABC123

#####Custom Themes

Creating a custom theme will allow you to build an entirely new spectrum of notification messages utilizing the existing notification types. To create a new theme, use the addTheme method. The first param is the name you'll use to reference your new theme. The second param is the class you'll use to style your new theme's notification types.

ngNotify.addTheme('newTheme', 'my-new-theme');

Now you can activate your new theme via the config method, using the name you previously assigned to it.

ngNotify.config({
    theme: 'newTheme'
});

To style your new theme, pick a collection of colors you'd like to use for each notification type and set them to each type's background color.

.my-new-theme.ngn-info
    background-color: #0033CC

.my-new-theme.ngn-error
    background-color: #FF0000

.my-new-theme.ngn-success
    background-color: #00CC00

.my-new-theme.ngn-warn
    background-color: #FF9900

.my-new-theme.ngn-grimace
    background-color: #660099

#####Custom Styles

The position, size, color, alignment and more are all styled based on the notification's classes and are all specified in the CSS file. See the style definitions below to see which classes can be used to override any of the styles within your own application.