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: [email protected]
• GitHub: @yshashi

Support

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