Angular notifications

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

Demo

- 👉 demo
!Alt text

Setup

npm i --save angular-notification-alert

Add dependencies to your app.module.ts:

``js
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\



`js
// 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
`html



`

In your component.ts:

`js
// 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;
// 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: 'Something went wrong 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);
}
`




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 from the repo please do
`js

npm install
ng serve

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

Want to help? and give me support

I welcome issues and pull requests on pr
If you need something improved, added, or fixed, please contribute and create a pull request.
thank you and cheers 🍕 🍕

## Author👩🏻‍💻
Juda Buchahda