An easy to use alert library for Angular 2


3360.0.74 years ago5 years agoMinified + gzip package size for @jaspero/ng2-alerts in KB


Build Status NPM Version

NG2 Alerts

An easy to use alert library for Angular 2.

npm install --save @jaspero/ng2-alerts

A demo can be found here


Import JasperoAlertsModule in your @NgModule:

    imports: [
    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 [defaultSettings]="options"></jaspero-alerts>

How To Use

You need to import the AlertsService in your component:

constructor(private _alert: AlertsService) {}

Then use the create(type: 'success' | 'error' | 'wearning', 'info', message: string, settings: AlertSettings) method to initiate an alert.

open(type: AlertType) {
    this._alert.create(type, 'This is a message');


Available settings:

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

You can provide the settings as input to the <jaspero-alerts></jaspero-alerts> component. Making the settings default for each created alert. However you can also override the settings by passing them in the create() method.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.