https://github.com/vipul1432/toaster-alert
A beautiful and customizable toast notification component for Angular applications
https://github.com/vipul1432/toaster-alert
angular-notification angular-toast npm-package toaster toaster-notification
Last synced: 6 months ago
JSON representation
A beautiful and customizable toast notification component for Angular applications
- Host: GitHub
- URL: https://github.com/vipul1432/toaster-alert
- Owner: Vipul1432
- Created: 2024-12-27T09:57:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-27T09:58:48.000Z (over 1 year ago)
- Last Synced: 2025-10-20T22:44:07.310Z (9 months ago)
- Topics: angular-notification, angular-toast, npm-package, toaster, toaster-notification
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/toaster-alert
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Toaster Alert
A beautiful and customizable toast notification component for Angular applications.
## Installation
```bash
npm install toaster-alert
```
## Usage
1. Import the AlertToasterModule in your app.module.ts:
```typescript
import { AlertToasterModule } from 'toaster-alert';
@NgModule({
imports: [
AlertToasterModule
]
})
export class AppModule { }
```
2. Add the alert-toaster component to your app.component.html:
```html
```
3. Inject and use the AlertToasterService in your components:
```typescript
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:
```css
: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