module for user notifications


0.2.263 months ago4 years agoMinified + gzip package size for @inax/notificationui in KB



module for inax notification service


You can install this package with npm.


npm install @inax/notificationui

Importing the module

Then, import the NotificationUiModule in your AppModule to include it in your project.

    imports: [
    declarations: [],
    providers: []
export class AppModule{ }



To be able to use the notifications, you need to pass a reference to the page's root-container to the notification service. You can do this in your root component (usually AppComponent) by following importing the notification service and linking the respective methods.

The result should look like this:

    constructor(private _logger: Logger, private _notificationService: InaxNotificationService,...){

      this._logger.assignInfoNotification( (message, ...data) => this._notificationService.logInfo(message, null, ...data) );
      this._logger.assignWarningNotification( (message, ...data) => this._notificationService.logWarning(message, 'Warning!', ...data) );
      this._logger.assignErrorNotification( (message, ...data) => this._notificationService.logError(message, 'Error!', ...data));
      this._logger.assignSuccessNotification( (message, ...data) => this._notificationService.logSuccess(message, 'Success!', ...data));

Import the scss by adding

@import "~@inax/notificationui/src/notificationUi";

somewhere in your project .scss file.

Then, you can call this._notificationService.logInfo('message!'); or one of the functions logWarning, logSuccess or logError wherever you want. To use the service in other components, you only need to add the service itself to the component's constructor, the ViewContainerRef does not need to be set again.


To configure the toasts, you can call

this._notificationService.changeOption(option, value);

for the options dismiss, toastLife, enableHTML, titleClass and messageClass. The behaviour of these options is documented here.

For styling the Toast, you can add a css element like the following:

#toast-container {
    bottom: 72px!important;


Copyright (c) insite-gmbh. All rights reserved.

See License in the project root for license information.

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.