Angular-notification-alert NPM

Angular notifications

Easy to use, highly customizable Angular notification- alert component.

Demo

👉 demo

Setup

npm i --save angular-notification-alert

Add dependencies to your app.module.ts:

import { AngularNotificationModule} from 'angular-notification-alert';
        ...

@NgModule({
 declarations: [
   ...
 ],
 imports: [
   ...
   AngularNotificationModule
 ],
 providers: [],
 bootstrap: [...]
})

There are 2 ways to use the notification element; \ inject it directly in your view and customize the element configuration in NgOnInit() for example\ <lib-notif></lib-notif>

  // then set up the configuration of the notification component 
  // ngOnInit(); if you want the notification element to show up directly in your view

  ngOnInit(): void {
    // setting object to set up the configuration
    const setting = {
      width: '450px',
      type: 'green',
      title: 'Notication title',
      body: 'The notification will viewable directly in your component',
      position: 'bottom right
    };

    // pass the setting to the service so it can be applied in the notification component. 
    this.Service.setProperties(setting);
  }

Or show the notification element on an event-trigger like addNotifElement() for example \ explained below

In your view.html

<div #parent> </div>

In your component.ts:

 // import the notification service from the angular-notification module
 import { AngularNotificationService, NotifComponent  } from 'angular-notification-alert';
 import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef } from '@angular/core';



 @ViewChild('parent', {read: ViewContainerRef}) target: ViewContainerRef;
 private componentRef: ComponentRef<any>;
 // inject the service in your constructor class
 constructor(private Service: AngularNotificationService,
             private componentFactoryResolver: ComponentFactoryResolver) { }


 // or show the notif element when an event fires 
 addNotifElement() {
   let setting = {
     width: '300px',
     type: 'danger',
     title: 'this an error message',
     body: '<b>Something went wrong </b> check it out',
     position: 'center',
     duration: 4000,
     background: '#fff'
   };
   this.Service.setProperties(setting);
   const childComponent = this.componentFactoryResolver.resolveComponentFactory( NotifComponent );
   this.componentRef = this.target.createComponent(childComponent);
 }