Angular2-Notifications

A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.

Push Notifications have been moved to a separate library ng-push

Table of Contents

• Example
• Setup
  • SystemJS
  • Webpack
• Setup
• Creating Notifications
  • Example using TemplateRef
• Subscribing to clicks
• Options

Example

Take a look at the live demo here: Live Demo

Setup

Install the library

npm install --save angular2-notifications
# Or using Yarn for a faster installation
yarn add angular2-notifications

SystemJS

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

var map = {
    'angular2-notifications': 'node_modules/angular2-notifications'
}

var packages = {
    'angular2-notifications': { main: './dist/index.js', defaultExtension: 'js' }
}

Webpack

If you're using Webpack >= 2, just include the library in your main.ts or vendor.ts file

import 'angular2-notifications';

Setup

Import the SimpleNotificationsModule in to your root AppModule (it will not work if you try to import it into a shared module)

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({
    imports: [
        BrowserModule,
        // Animations need to be imported in to your project to use the library
        BrowserAnimationsModule, 
        SimpleNotificationsModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add the SimpleNotificationsComponent in to the component where you want to use the notifications. Or in your top level component for use in child components.

...
template: '<simple-notifications></simple-notifications>'
...

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

...
constructor( private _service: NotificationsService ) {}
...

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

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

If your app cannot find the built JS files for this package, you may need to tell your build script to scan the angular2-notifications directory. See the related issue #25. Example:

'angular2-notifications/*.+(js|js.map)',
'angular2-notifications/lib/*.+(js|js.map)'

Creating Notifications

This are the currently available access methods:

• The access methods return the constructed notification along with the created id.

The title, content and html arguments can be a string, html string or TemplateRef. Now it's also possible to pass the datas (context) to the TemplateRef by using the optional context argument.

Example using TemplateRef

To use a TemplateRef in the title or content you need to create it in a component template:

<ng-template #example let-title="title">
    <p>{{title}}</p>
</ng-template>

Then you need to somehow get it to the component:

  title: string = 'Winter is coming';
  @ViewChild('example') example: TemplateRef<any>;

  open() {
    let context: any = {title: this.title};
    this._service.html(this.example, null, null, null, context);
  }

You could also pass the template through the open() method:

    open(temp: TemplateRef<any>) {
        this._service.html(temp, null, null, null, context);
    }

Subscribing to clicks

If you are interested in the clicks that happen on a notification you have the possibility to subscribe to a EventEmitter. The methods (success, error, alert, warn, info, bare, create and html) from the NotificationsService return an Object of type Notification.

const toast = this.notificationsService.success('Item created!', 'Click to undo...', {
      timeOut: 3000,
      showProgressBar: true,
      pauseOnHover: true,
      clickToClose: true
    });

The returned object has a click property with an EventEmitter on it which you can subscribe to. Your callback then gets notified with the click event at each click that happens on your Notification.

toast.click.subscribe((event) => {
    doSomething(event)
});

If you have configured the notification to close when the icon is clicked, an EventEmitter exists to listen for those clicks as well.

const toast = this.notificationsService.success('Item created!', 'Click to undo...', {
      timeOut: 3000,
      showProgressBar: true,
      pauseOnHover: true,
      clickToClose: false,
      clickIconToClose: true
    });

With the corresponding clickIcon property as above.

toast.clickIcon.subscribe((event) => {
    doSomething(event)
});

Options

Global options can be added in two ways. They can be passed through the forRoot() method on the module.

SimpleNotificationsModule.forRoot({
    ...options
})

You can also pass them in to the root component.

<simple-notifications [options]="options"></simple-notifications>

This are the current options that can be set globally:

Icons

Here is an example of passing the options to the component. You only pass the options you want changed. Options passed to the component are global. They apply to all of the notifications the get created.

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

If you want a specific notification to have different options you can override them when calling any of the access methods by passing them to the override object. The following options can be overridden:

• id
• animate
• timeOut
• showProgressBar
• pauseOnHover
• clickToClose
• clickIconToClose
• maxLength
• theClass
• icon

This is an example of overriding global options:

this._notificationsService.success(
    'Some Title',
    'Some Content',
    {
        timeOut: 5000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: false,
        maxLength: 10
    }
)

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Filip Lauc