README
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);
}
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
npm install
ng serve
app being served at: http://localhost:4200