Winwin-notifications NPM

WinwinNotifications

This library allows to show floating notifications with cancel btn

Installing

npm i winwin-notifications

In app.module.ts do import

import {WinWinNotificationsModule} from "winwin-notifications";
...
imports: [
    ...,
    WinWinNotificationsModule,
    ...
]

Then in your HTML insert component. You should use wrapper to style default and custom notifications

<div class="wrapper">
  <lib-winwin-notifications></lib-winwin-notifications>
</div>

And in component.ts file inject

    constructor(private _notificationService: WinWinNotificationsService) {}

Usage

There is several methods to call notification

1. Usual notification.

  this._notificationService.open(message: string, timeout: number, className: string);

You can customize style with next construction

.wrapper ::ng-deep .className {
 background: yellow;
}

2. Notification with custom component

    this._notificationService.openFromComponent(component: ComponentType<any>, timeout: number, className: string);

You can implement close button in your component

@Component({
  selector: 'app-custom-notification',
  template: `
    <div class="custom-notification">
      <p>Notification message</p>
      <button (click)="closeNotification()">CLOSE</button>
    </div>
  `,
  ...
})
export class CustomNotificationComponent() {

    @Output() dismiss = new EventEmitter(); // should be named 'dismiss' only

    constructor(){}
    ...

    public closeNotification(): void {
      this.dismiss.emit();
    }

}