@inax/notificationui

module for inax notification service

Install

You can install this package with npm.

npm

npm install @inax/notificationui

Importing the module

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

@NgModule({
    imports: [
        NotificationUiModule
    ],
    declarations: [],
    providers: []
})
export class AppModule{ }

Documentation

Setup

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.

Configuration

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;
}

License

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

See License in the project root for license information.