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

1. Import NgToastModule in your app.module.ts:

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

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

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

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

3. 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;
  }
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Sashi Yadav

• Email: [e-mail]
• GitHub: @yshashi

Support

If you like this project, please consider giving it a ⭐️ on GitHub!