🚀 NgxNoti - Lightweight Angular Notification Service

NgxNoti is a lightweight and flexible notification service and component built for Angular. Easily trigger customizable notifications anywhere in your application — fully animated, dismissable, and configurable.

✨ Features

• Add success, error, info, or warning notifications from any service/component
• Auto-dismiss with configurable visibility time
• Manual dismiss and "clear all" support
• Minimalistic and performant
• Compatible with Angular standalone APIs

📦 Installation

npm i @vi5hnuu/ngx-noti

⚙️ Setup

1. Provide the service & provideAnimations in your app configuration:

// main.ts or app.config.ts
import { NgxNotiService } from '@vi5hnuu/ngx-noti';
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    NgxNotiService,
    provideAnimations(),
    ...
  ],
...

📝 You can also provide NgxNotiService at the component level if you prefer isolated instances.

2. Add the notifications panel to your layout (usually in AppComponent):

<!-- app.component.html -->
<lib-notifications-panel
  [notificationsPosition]="NotificationPosition.BOTTOM_LEFT"
  (dismiss)="ngxNoti.clearNotification($event)"
  (dismissAll)="ngxNoti.clearAllNotifications()"
/>

3. Inject and use NgxNotiService to trigger notifications:

import { Component } from '@angular/core';
import {NgxNotiService, NotificationsPanelComponent,NotificationPosition,NotificationType} from '@vi5hnuu/ngx-noti';


@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
})
export class SampleComponent {
  constructor(public ngxNoti: NgxNotiService) {}

  notifySuccess() {
    this.ngxNoti.addNotification({
      title: 'Upload Complete',
      type: NotificationType.SUCCESS,
      description: 'Your file was uploaded successfully.',
      visibilityTimeMs: 3000,
    });
  }
}

📚 API Reference

addNotification({ title, type, description?, visibilityTimeMs?, iconSrc?, iconRef? })

Adds a new notification to the queue.

• title – Notification title (required)
• type – NotificationType enum (SUCCESS, ERROR, INFO, WARNING)
• description – Optional description
• visibilityTimeMs – Optional auto-dismiss delay (defaults to infinite if not set)
• iconSrc – Optional [for notification icon]
• templateRef - Optional [for notification icon]
• iconRef – Optional HTMLElement to anchor the notification

Priority - iconSrc > templateRef > default

ℹ️ Note:
For default icons to work, you need to add the following to your angular.json:

{
  "glob": "**/*",
    "input": "node_modules/@vi5hnuu/ngx-noti/assets/",
    "output": "assets/ngx-noti"
}

clearNotification(id: string)

Dismiss a specific notification manually.

clearAllNotifications()

Clears all active notifications.

📌 Notification Positions

Use the NotificationPosition enum:

• TOP_LEFT
• TOP_RIGHT
• BOTTOM_RIGHT
• BOTTOM_LEFT
• TOP_CENTER
• BOTTOM_CENTER

📌 Test View

✅ License

MIT License. Created by Vishnu kumar.

🔗 Connect with Me

Feel free to connect with me on social media:

• Portfolio
• GitHub
• LinkedIn
• PlayStore