Notif Library

Notif Library is an Angular component that provides real-time notifications using Server-Sent Events (SSE). It is lightweight, customizable, and easy to integrate into Angular applications.

Features

• Real-time notifications via SSE
• Configurable timeout duration
• Adjustable position for desktop and mobile
• Custom CSS class support
• Option to show/hide logos

Installation

Install the library using npm:

npm install notif-library

Importing the Module

Add NotifLibraryModule to your Angular module:

import { NotifLibraryModule } from 'notif-library';

@NgModule({
  declarations: [...],
  imports: [
    NotifLibraryModule,
    ...
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule {}

Usage

Add the notification component in your template:

<notif-library *ngIf="isLoaded"
  [timeout]="12000"
  [showLogo]="false"
  position="top-right"
  mobilePosition="bottom"
  className="notif-custom-class"
  sseUrl="API_URL_HERE">
</notif-library>

Properties

Property	Type	Default	Description
sseUrl	string	''	URL for SSE event source
timeout	number	12000	Notification display duration (in ms)
showLogo	boolean	true	Show/hide logo in notifications
position	string	'bottom-left'	Desktop notification position (top-left, top-right, bottom-left, bottom-right)
mobilePosition	string	'top'	Mobile notification position (top, bottom)
className	string	''	Custom CSS class for styling

Example with Custom Styling

You can add custom styles by specifying a className and defining the styles in your global styles or component styles:

.notif-custom {
  background-color: #333;
  color: white;
}

License

This project is licensed under the MIT License. Feel free to use and modify it as needed.

Contact

For any issues or feature requests, open an issue on the GitHub repository or reach out to the maintainer.