Skip to content

samvaughton/angular2-notifications

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular2-Notifications

A light and easy to use notifications library for Angular 2.

Example

Take a look at the live demo here: Live Demo You can also clone this repository and check out the example folder.

Setup

Download the library with npm

npm install --save angular2-notifications

Map the library in your System.config if you're using SystemJs.

System.config({
    map: {
        'notifications': 'node_modules/angular2-notifications'
    }
});

Add the SimpleNotificationsComponent in to the component where you want to use the notifications.

...
directives: [SimpleNotificationsComponent],
template: '<simple-notifications [options]="options"></simple-notifications>'
...

The onCreate and onDestroy Event Emitters emit the notification that was created or destroyed you can utilise this functionality like this:

<simple-notifications [options]="options" (onCreate)="created($event)" (onDestroy)="destroyed($event)"></simple-notifications>

You will also need to use the NotificationsService in your component to create or remove the notifications.

...
providers: [NotificationsService]
...
constructor( private _service: NotificationsService ) {}
...

This are the currently available access methods:

  • success(title: string, content: string, override?: any) - Creates a success notification with the provided title and content.
  • error(title: string, content: string, override?: any) - Creates an error notification with the provided title and content.
  • alert(title: string, content: string, override?: any) - Creates an alert notification with the provided title and content.
  • info(title: string, content: string, override?: any) - Creates an info notification with the provided title and content.
  • bare(title: string, content: string, override?: any) - Creates a bare notification with the provided title and content. This notification type is best used when adding custom html.
  • create(title: string, content: string, type: string, override?: any) - Use this method to create any notification type ['success', 'error', 'alert', 'info', 'bare'].
  • html(html: any, type: string, override?: any - Use this method to create a notification with custom html.
  • remove(id?: string) - Removes the notification that has the provided id or removes all currently open notifications if no id was provided.

Options

This are the current options that can be pass to the component:

Option Type Default Description
timeOut int 0 Determine how long a notification should wait before closing. If set to 0 a notification won't close it self.
showProgressBar boolean true Determine if a progress bar should be shown or not.
pauseOnHover boolean true Determines if the timeOut should be paused when the notification is hovered.
lastOnBottom boolean true Determines if new notifications should appear at the bottom or top of the list.
clickToClose boolean true Determines if notifications should close on click.
maxLength int 0 Set the maximum allowed length of the content string. If set to 0 or not defined there is no maximum length.
maxStacks int 8 Set the maximum number of notifications that can be on the screen at once.
preventDuplicates boolean false If true prevents duplicates of open notifications.
preventLastDuplicates boolean or string false If set to "all" prevents duplicates of the latest notification shown ( even if it isn't on screen any more ). If set to "visible" only prevents duplicates of the last created notification if the notification is currently visible.
theClass string null A class that should be attached to the notification. (It doesn't exactly get attached to the selector but to the first div of the template.)

Here is an example of passing the options to the component. You only pass the options you want changed.

...
template: '<simple-notifications [options]="options"></simple-notifications>'
...
public options = {
    timeOut: 5000,
    lastOnBottom: true
    ...
}

The following options can be overridden by passing them to the override object:

  • timeOut
  • showProgressBar
  • pauseOnHover
  • clickToClose
  • maxLength
  • theClass
this._notificationsService.success(
    title: 'example', 
    content:'example', 
    override: {
        timeOut: 5000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: false,
        maxLength: 10
    }
)

Planed Features

  • CSS Themes
  • Animation
  • Custom types

About

An easy to use notifications library for Angular 2

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 70.8%
  • JavaScript 24.2%
  • HTML 5.0%