Angular notifications

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

Demo

• 👉 demo

Setup

npm i angular-notification-alert --save

Add dependencies to your app.module.ts:

import { AngularNotificationModule} from 'ng-notification';
        ...

@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>

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

In your component.ts:

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


 // inject the service in your constructor class
 constructor(private Service: AngularNotificationService,
             private componentFactoryResolver: ComponentFactoryResolver) { }


 // 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
   this.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(this.setting);
 }

 // or show the notif element when an event fires 
   addNotifElement() {
   this.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(this.setting);
   const childComponent = this.componentFactoryResolver.resolveComponentFactory( NotifComponent );
   this.componentRef = this.target.createComponent(childComponent);
 }

Usage

Here is the list of the configurations you can pass to the notification component
in the setting object

Name	Type	Default	Description
type	'warn', 'danger', 'success', 'default'	'default'	type of the notification: warn, danger, ...
position	'bottom right', 'bottom left', 'top right', 'top left', 'center'	'top left'	Part of the screen where notifications will pop out
opacity	number	1	Opacity of the notification element
Background	string	'#fff'	color background of the notification element
title	string		the notification title
body	html		the notification content you can warp html tag in it
duration	number	4000	Time (in ms) to keep the notification on screen
width	string	30%	width of the notif element in px or %

Developement

To run a local demo:

npm install 
ng serve

app is being served at: http://localhost:4200

Want to help? and give me support

I welcome issues and pull requests on [pr](https://github.com/miminerd/angular-notification/pulls) If you need something improved, added, or fixed, please contribute and create a pull request. thank you and cheers🍕 🍕\

Author👩🏻‍💻

Juda Buchahda