Sp-notifications NPM

Notification

This library was generated with Angular CLI version 8.2.14.

sample

New Features!

Bug fixed for close button not showing.
Add dynamic Styles to your each of your notifications
Support for FontAwesome icons Please Note: Font Awesome must be installed in our angular project. Add the following to head tag of index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

How to install

You can get sp-notifications via npm by either adding it as a new dependency to your package.json file and running npm install, or running the following command:

npm install sp-notifications

Import the NotificationModule

First of all, make sp-notifications globally available to your Angular application by importing the NotificationModule the your root Angular module. For example:

import { NotificationModule } from 'sp-notifications';
 
@NgModule({
    imports: [NotificationModule]
})
export class AppModule {}

Input Variables

Variable	README
data	All the content you want to show in the notification
index	Index of the particular notification widget

Output Variables

Events	README
(actionPerformed)	Triggered when click is performed on one of the actions
(onOpen)	Triggered when the notification widget is initialised
(onClose)	Triggered when the close button is clicked

Example

HTML

 <ng-container *ngFor="let id of toShow; let i = index">
  <sp-notification [index]="i" 
  [data]="notificationsObj[id]" 
  (actionPerformed)="btnClicked(id, $event)"
  (onClose)="closed(id, i)">
  </sp-notification>
</ng-container>

TS

 toShow = ['online', 'offline'];

  notificationsObj = {
    offline: {
      icon: 'fas fa-exclamation-circle',
      style: {
        background: '#ec5656'
      },
      message: 'No internet',
      buttons: [
      ]
    },
    online: {
      icon: 'fas fa-wifi',
      style: {
        background: '#71b971'
      },
      message: 'Internet is now connected',
      buttons: [ {
        id: 'reload',
        name: 'Reload'
      }
      ]
    },
    basic: {
      style: {
        background: '#6565e8'
      },
      message: 'convert your account to premium because that is necessary for the best experience',
      buttons: [
        {
          id: 'getpro',
          name: 'Get Pro'
        }, {
          id: 'getultra',
          name: 'Get Ultra'
        }
      ]
    }
  };

btnClicked(id, $event) {
  if($event === 'reload') {
    window.location.reload();
  }
}

closed(id, n) {
    console.log('closed');
    this.toShow.splice(n, 1);
  }