Angular standalone toast notification library
npm install sc-angular-toastifybash
npm install sc-angular-toastify
`
---
📦 Usage
$3
Import the ToastService in your Angular component:
`ts
import { ToastService } from 'sc-angular-toastify';
`
If you are using the standalone component in your template, add:
`ts
import { ScAngularToastify } from 'sc-angular-toastify';
`
---
$3
`ts
constructor(private toast: ToastService) {}
`
`ts
imports: [ScAngularToastify];
`
---
$3
You can trigger a toast anywhere in your component:
`ts
this.toast.show('Hello World!', {
type: 'success', // success | error | info | warn
duration: 3000, // duration in ms
position: 'top-right', // top-right | top-left | bottom-right | bottom-left
});
`
---
$3
If you are using standalone component, add this in your main template (like app.component.html):
`html
`
This will render all toasts in the selected positions.
---
⚙️ Options
| Option | Type | Default | Description |
| ---------- | ------ | ----------- | ------------------------------------------------- |
| type | string | 'info' | Type of toast: 'success', 'error', 'warn', 'info' |
| duration | number | 3000 | Duration in milliseconds before auto close |
| position | string | 'top-right' | Position of the toast on screen |
---
📜 Example
`ts
// Show success toast
this.toast.show('
Data saved successfully!', // Message
'success', //type
5000, //duration
'top-right', //position with default
);
// Show error toast
this.toast.show(
'Failed to save data!', // Message
'error', //type
4000, //duration
'bottom-left', //position
);
``