ng-angular-popup/README.md

A modern, lightweight, and customizable toast notification library for Angular applications

# ng-angular-popup

[![npm version](https://badge.fury.io/js/ng-angular-popup.svg)](https://badge.fury.io/js/ng-angular-popup)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

```bash
npm install ng-angular-popup
```

## Quick Start

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

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

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

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

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

3. Inject and use the service in your components:

```typescript
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

```typescript
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:

```scss
// 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](LICENSE) file for details.

## Author

**Sashi Yadav**
- Email: yshashi30@gmail.com
- GitHub: [@yshashi](https://github.com/yshashi)

## Support

If you like this project, please consider giving it a ⭐️ on [GitHub](https://github.com/yshashi/ng-angular-popup)!