Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.
npm install flexi-toasttop-right, bottom-left, etc.
bash
npm install flexi-toast
`
---
Usage
$3
`ts
import { FlexiToastService } from 'flexi-toast';
@Component({
...
})
export class AppComponent {
readonly #toast = inject(FlexiToastService);
`
---
$3
`ts
import { ToastService } from 'flexi-toast';
@Component({ / ... / })
export class AppComponent {
readonly #toast = inject(FlexiToastService);
notify() {
this.toast.show('Success','This is a message','success'); //icon => success | info | warning | error
}
}
`
---
$3
`ts
import { ToastService } from 'flexi-toast';
@Component({ / ... / })
export class AppComponent {
readonly #toast = inject(FlexiToastService);
swal(){
this.#toast.showSwal("Question?","This is a question?","Yes",() => {
this.#toast.showToast("Info","This is a info message", "info");
},"No")
}
}
`
---
API
| Option | Type | Default | Description |
|-------------------------|-------------------------------------------|-----------------|--------------------------------------------|
| 'icon' | FlexiToastIconType | 'success' | Icon to display on the toast |
| 'autoClose' | boolean | true | Automatically close the toast after timeout|
| 'timeOut' | number | 3000 | Time in milliseconds before auto-close |
| 'showProgressBar' | boolean | true | Show a progress bar indicator |
| 'showToastCloseBtn' | boolean | true | Show a close (×) button on the toast |
| 'showSwalCloseBtn' | boolean | false | Show a close button in SweetAlert dialogs |
| 'preventDuplicate' | boolean | false | Prevent showing duplicate toasts |
| 'position' | FlexiToastPositionType | 'bottom-right' | Position of the toast container |
| 'themeClass' | FlexiToastThemeClassType | string | 'light' | CSS class or theme for toast styling |
| 'cancelBtnText' | string | 'Vazgeç' | Text for the SweetAlert cancel button |
| 'confirmBtnText' | string | 'Sil' | Text for the SweetAlert confirm button |
| 'swalContentThemeClass' | FlexiSwalContentThemeClass | 'default' | CSS class for SweetAlert content styling |
---
Styling & CSS Variables
Define your own colors and styling:
`css
:root {
--toast-bg-success: '#dff0d8';
--toast-bg-error: '#f2dede';
--toast-bg-info: '#d9edf7';
--toast-bg-warning: '#fcf8e3';
--toast-color: '#333';
--toast-padding: '12px 16px';
--toast-border-radius: '4px';
}
``