Awesome

NG Alerts

An easy to use alert library for Angular.

A demo can be found here

Installation

To install this library, run:

$ npm install --save @jaspero/ng-alerts

Setup

Import JasperoAlertsModule in your AppModule:

import {JasperoAlertsModule} from '@jaspero/ng2-alerts';

@NgModule({
    imports: [
        JasperoAlertsModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then create the component in a root component (you can create it anywhere but you can only use it in that component on any lower ones).

<jaspero-alerts></jaspero-alerts>

How To Use

You need to import the AlertsService in your component:

import {AlertsService} from '@jaspero/ng-alerts';
...
constructor(private _alert: AlertsService) {}

Then use the create(type: AlertType, title: (string | HTML | TemplateRef) = '', message: (string | HTML | TemplateRef) = '', settings: AlertSettings = {}) method to initiate an alert.

import {AlertType} from '@jaspero/ng-alerts';
...
// AlertType = 'success' | 'error' | 'warning' | 'info'
open(type: AlertType) {
    this._alert.create(type, 'This is a title', 'This is a message');
}

Alert Settings

export interface AlertSettings {
    overlay?: boolean;
    overlayClickToClose?: boolean;
    showCloseButton?: boolean;
    duration?: number;
}

You can provide the settings as input to the component.
<jaspero-alerts [defaultSettings]="options"></jaspero-alerts>
This will be the default settings for each created alert. However you can also override the settings by passing them in the create(type, title, message, settings: AlertSettings) method.

Development

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

$ npm run build

To lint all *.ts files:

$ npm run lint