@adarshctas/live-notification

A lightweight Angular notification library for real-time notifications, toast messages, alerts, and in-app notifications.

✨ Features

• 🔔 Real-time notifications using Socket.IO
• 📡 REST API support (send / fetch / mark as read)
• 🍞 Toast notifications (success, error, warning, info)
• 📊 Multiple notification modes (alert / toast / inapp)
• 🎯 Filter notifications by type
• ✅ Mark notifications as read
• 🔌 Easy Angular integration
• 🧹 Auto cleanup socket listeners

📦 Installation

Install the package using npm:

npm install @adarshctas/live-notification

📋 Requirements

Make sure your Angular project has the following dependencies:

{
  "@angular/core": ">=15.0.0",
  "@angular/common": ">=15.0.0",
  "@angular/common/http": ">=15.0.0",
  "rxjs": ">=6.5.0"
}

🚀 Quick Start

1. Import Notification Service

import { Notification } from '@adarshctas/live-notification';

2. Inject Service Inside Component

constructor(private notification: Notification) {}

3. Initialize Notifications

Subscribe to real-time notifications inside ngOnInit():

ngOnInit() {
  this.notification.listenNotification()
    .subscribe(data => {
      console.log('New Notification:', data);
    });
}

🔔 Notification Modes

This library supports 3 notification modes:

Toast Notification

Temporary popup message.

setToastMode() {
  this.notification.setActiveType('toast');

  this.notification.toast({
    message: 'Saved successfully!',
    type: 'success'
  });
}

Alert Notification

Simple alert popup.

setAlertMode() {
  this.notification.setActiveType('alert');

  this.notification.show('This is an alert notification');
}

In-App Notification

Structured notification inside the application.

setInAppMode() {
  this.notification.setActiveType('inapp');

  this.notification.notify({
    title: 'New Message',
    message: 'You received a notification',
    type: 'info'
  });
}

📌 API Methods

show()

Show a simple alert notification.

this.notification.show('Notification message');

toast()

Display a toast message.

this.notification.toast({
  message: 'Data saved successfully',
  type: 'success'
});

Types supported:

• success
• error
• warning
• info

notify()

Send a structured notification.

this.notification.notify({
  title: 'Notification Title',
  message: 'Notification message',
  type: 'info'
});

listenNotification()

Listen for real-time notifications.

this.notification.listenNotification()
  .subscribe(data => {
    console.log(data);
  });

setActiveType()

Set notification display mode.

this.notification.setActiveType('toast');

Available modes:

'toast'
'alert'
'inapp'

requestPermission()

Request browser notification permission.

this.notification.requestPermission();

🧩 Example Component

import { Component, OnInit } from '@angular/core';
import { Notification } from '@adarshctas/live-notification';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

  constructor(private notification: Notification) {}

  ngOnInit() {
    this.notification.listenNotification()
      .subscribe(data => {
        console.log('New Notification:', data);
      });
  }

  showToast() {
    this.notification.setActiveType('toast');

    this.notification.toast({
      message: 'Login Successful',
      type: 'success'
    });
  }

  showAlert() {
    this.notification.setActiveType('alert');
    this.notification.show('Alert Notification');
  }

  showInApp() {
    this.notification.setActiveType('inapp');

    this.notification.notify({
      title: 'Welcome',
      message: 'New notification arrived',
      type: 'info'
    });
  }
}

🎯 Summary

| Method | Description | |---------|-------------| | show() | Simple alert notification | | toast() | Temporary popup notification | | notify() | Structured in-app notification | | listenNotification() | Listen to notifications | | setActiveType() | Change notification mode | | requestPermission() | Ask browser permission |

🛠 Maintainer

Developed by Adarsh Ctasis LLP

📄 License

MIT License © Adarsh Ctasis LLP