Toaster Alert

A beautiful and customizable toast notification component for Angular applications.

Installation

npm install toaster-alert

Usage

1. Import the AlertToasterModule in your app.module.ts:

import { AlertToasterModule } from 'toaster-alert';

@NgModule({
  imports: [
    AlertToasterModule
  ]
})
export class AppModule { }

2. Add the alert-toaster component to your app.component.html:

<alert-toaster></alert-toaster>

3. Inject and use the AlertToasterService in your components:

import { AlertToasterService } from 'toaster-alert';

export class YourComponent {
  constructor(private toaster: AlertToasterService) {}

  showSuccess() {
    this.toaster.success('Operation completed successfully!');
  }

  showError() {
    this.toaster.error('An error occurred!');
  }

  showInfo() {
    this.toaster.info('Here is some information.');
  }

  showWarning() {
    this.toaster.warning('Warning: Please be careful!');
  }
}

Features

• 4 types of notifications: Success, Error, Info, and Warning
• Customizable duration
• Smooth animations
• Progress bar
• Responsive design
• Easy to use API
• Customizable styling through CSS variables

Customization

You can customize the colors using CSS variables:

:root {
  --success-color: #28a745;
  --error-color: #dc3545;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
}

Dependencies

• @angular/common
• @angular/core
• @angular/animations
• Font Awesome (for icons)

License

MIT