B2P-Notification-Center

Credits:

This library is heavily inspired and a re-write of Angular2-Notifications, started with some tweaks that a client needed and ends up changing a lot of principals of the original project.

• Demo
• Setup
• Run demo project locally
• Bonus
• License

Demo

This demo is provided by github pages as a result of a workflow (ci/cd deploy) means it is possible that i make a mistake and break it all.

Setup

Install the library

npm i b2p-notification-center

Import the NotificationCenterModule in your root AppModule

import { NotificationCenterModule } from 'b2p-notification-center';

@NgModule({
    imports: [
        BrowserModule,
        // Animations need to be imported in to your project to use the library
        BrowserAnimationsModule,
        NotificationCenterModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add the NotificationCenterModule to the component where you want to use the notifications. Or in your top level component for use in child components.

...
template: '<b2p-notification-center></b2p-notification-center>'
...

You will also need to use the NotificationsService in your component to create notifications.

...
constructor( private notificationservice: NotificationCenterService ) {}
...
public addNotification(notificationType: NotificationType): void {
    switch (notificationType) {
      case NotificationType.Error:
        this.notificationservice.error('', 'Test Error');
        break;
      case NotificationType.Warning:
        this.notificationservice.warning('', 'Test Warning');
        break;
      case NotificationType.Info:
        this.notificationservice.info('', 'Test Info');
        break;
      default:
        this.notificationservice.success('', 'Test Success');
        break;
    }
}
...

Run demo project locally

In github project repo you will find a project attached to the library, in order to run it locally follow these commands:

ng build b2p-notification-center #npm script 'build:lib'
cd dist/b2p-notification-center
npm link
cd ../..
npm link b2p-notification-center
ng serve notification-center-demo #npm script 'start'

Bonus

to be able to work on the library and test live without interruption:

ng build b2p-notification-center --watch
ng serve notification-center-demo

That's it.

License

MIT © Ahmed HABBACHI