🚀 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, paused while the user hovers or focuses
• Manual dismiss and "clear all" support
• Responsive: full-width on phones, a compact column on tablets, unchanged on desktop
• Accessible: role="alert" with a live region, and a real, keyboard-operable close button
• Capped stack so a burst of notifications cannot bury the screen
• No CSS framework dependency — the component ships ~4 kB of its own styles
• Compatible with Angular standalone APIs

📦 Installation

npm i @vi5hnuu/ngx-noti

⚙️ Setup

1. Provide animations (the service is providedIn: 'root')

NgxNotiService registers itself, so no provider entry is required. List it in a component's providers only if you want that part of the app to have its own isolated stack.

// 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: [
    ...
    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" />

The panel dismisses through the service itself, so no output wiring is needed. The (dismiss) and (dismissAll) outputs still fire if you want to react to them:

<lib-notifications-panel
  [notificationsPosition]="NotificationPosition.BOTTOM_LEFT"
  [maxStack]="5"
  [pauseOnHover]="true"
  (dismiss)="onDismissed($event)"
  (dismissAll)="onCleared()"
/>

Panel inputs

| Input | Default | Purpose | |---|---|---| | notificationsPosition | BOTTOM_RIGHT | Which corner or edge the stack grows from | | maxStack | 5 | Most notifications on screen at once; the oldest is dropped past this | | pauseOnHover | true | Hold a notification open while hovered or keyboard-focused | | clearAllThreshold | 2 | Stack depth at which the "clear all" control appears |

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?, templateRef? }): string

Adds a new notification to the queue and returns its id, so you can dismiss or update it later.

• 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]

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. Safe to call for an id that has already gone.

clearAllNotifications()

Clears all active notifications and cancels their timers.

update(id: string, patch: NotificationPatch)

Change title, description, type or iconSrc on a live notification — useful for a toast that reports progress. No-op if the notification has already been dismissed.

const id = this.ngxNoti.addNotification({ title: 'Uploading…', type: NotificationType.INFO });
// later
this.ngxNoti.update(id, { title: 'Upload complete', type: NotificationType.SUCCESS });
this.ngxNoti.clearNotification(id);

pause(id: string) / resume(id: string)

Hold a notification open and let it continue. The panel calls these for you when pauseOnHover is on; they are public for cases the panel cannot see.

📌 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