Ng-angular-popup NPM

ng-angular-popup

A modern, lightweight, and customizable toast notification library for Angular applications (Angular 12+).

Features

🚀 Lightweight and performant
🎨 Fully customizable
📱 Responsive design
🔧 Easy to integrate
🎯 Multiple toast positions
⚡ Different toast types (Success, Error, Warning, Info)
⏱️ Customizable duration
🖥️ Modern UI design

Installation

npm install ng-angular-popup

Quick Start

Import NgToastModule in your app.module.ts:

import { NgToastModule } from 'ng-angular-popup';

@NgModule({
  imports: [
    NgToastModule
    // ...
  ]
})
export class AppModule { }

Add the toast component to your app.component.html:

<ng-toast [width]="300" [position]="ToasterPosition.TOP_CENTER"></ng-toast>

Inject and use the service in your components:

import { NgToastService, ToasterPosition, ToastType } from 'ng-angular-popup';

@Component({
  // ...
})
export class YourComponent {
  constructor(private toast: NgToastService) {}

  showSuccess() {
    this.toast.success('Success Message', 'Title', 3000);
  }

  showError() {
    this.toast.danger('Error Message', 'Error', 3000);
  }

  showInfo() {
    this.toast.info('Info Message', 'Information', 3000);
  }

  showWarning() {
    this.toast.warning('Warning Message', 'Warning', 3000);
  }
}

API Reference

Toast Service Methods

Method	Parameters	Description
success	(message: string, title?: string, duration?: number)	Shows a success toast
danger	(message: string, title?: string, duration?: number)	Shows an error toast
info	(message: string, title?: string, duration?: number)	Shows an info toast
warning	(message: string, title?: string, duration?: number)	Shows a warning toast

Toast Component Properties

Property	Type	Default	Description
width	number	300	Width of the toast in pixels
position	ToasterPosition	TOP_RIGHT	Position of the toast on screen

ToasterPosition Enum

enum ToasterPosition {
  TOP_LEFT = 'toaster-top-left',
  TOP_CENTER = 'toaster-top-center',
  TOP_RIGHT = 'toaster-top-right',
  BOTTOM_LEFT = 'toaster-bottom-left',
  BOTTOM_CENTER = 'toaster-bottom-center',
  BOTTOM_RIGHT = 'toaster-bottom-right'
}

Styling

The toasts can be customized using CSS variables. Add your custom styles in your global styles file:

// Example customization
.toast-message {
  &.toast-success {
    border-left: 3px solid #22c55e;
  }

  &.toast-error {
    border-left: 3px solid #ef4444;
  }

  &.toast-info {
    border-left: 3px solid #3b82f6;
  }

  &.toast-warning {
    border-left: 3px solid #f59e0b;
  }
}