Angular 4+ Notification Library

Description:

This notification library shows success, error, info and warning notifications on your Angular 4+ app.

Installation:

# Yarn
$ yarn add @cloukit/notification

# NPM
$ npm install @cloukit/notification --save

How to use it:

Import the necessary modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CloukitDropoutModule } from '@cloukit/dropout';
import { CloukitThemeModule } from '@cloukit/theme';
import { CloukitNotificationModule } from '@cloukit/notification';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    CloukitThemeModule,
    CloukitNotificationModule,
    CloukitDropoutModule,
  ],
  providers: [ ],
  bootstrap: [ AppComponent ],
})

In you component template.

<cloukit-dropout-outlet></cloukit-dropout-outlet>
<cloukit-notification-outlet-loader
  theme="notification"
  placement="bottomLeft"
  offsetX="80"
  offsetY="0"
></cloukit-notification-outlet-loader>

Create a demo notification.

import { Component } from '@angular/core';
import {
  CloukitNotificationService,
  CloukitNotification,
  CloukitNotificationType,
} from '@cloukit/notification';

@Component({
  selector: 'demo',
  template: `<button (click)="addNotification()">add</button>`,
  styles: []
})
export class DemoComponent {
  constructor(private notificationService: CloukitNotificationService) {}
  addNotification() {
    this.notificationService.addNotification(
      new CloukitNotification(
        'Success',                        // title
        'You clicked a button!',          // message
        CloukitNotificationType.SUCCESS,  // type
        null,                             // linkOne
        null,                             // linkTwo
        2000                              // Optional: Autoclose after 2secs
    ));
  }
}

Preview: