Flexi Toast

Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.

---

Live Demo

---

Features

• 🟢 Success, 🔴 Error, 🔵 Info, 🟠 Warning toasts
• ⏲️ Configurable timeout & auto-dismiss
• 🔢 Multiple stack positions: top-right, bottom-left, etc.
• 🎨 Customizable styles & animations
• ♿️ ARIA roles & keyboard support
• 🔧 Full customization via inputs & CSS variables

---

Installation

npm install flexi-toast

---

Usage

1. Import

import { FlexiToastService } from 'flexi-toast';

@Component({
  ...
})
export class AppComponent {
  readonly #toast = inject(FlexiToastService);

---

2. Show a Toast

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. Show a Swal

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")
  }
}
``$

---

## \text{API}

| \text{Option}                  | \text{Type}                                      | \text{Default}         | \text{Description}                                |
|-------------------------|-------------------------------------------|-----------------|--------------------------------------------|
| '\text{icon}'                  | \text{FlexiToastIconType}                        | '\text{success}'       | \text{Icon} \text{to} \text{display} \text{on} \text{the} \text{toast}               |
| '\text{autoClose}'             | \text{boolean}                                   | \text{true}            | \text{Automatically} \text{close} \text{the} \text{toast} \text{after} \text{timeout}|
| '\text{timeOut}'               | \text{number}                                    | 3000            | \text{Time} \text{in} \text{milliseconds} \text{before} \text{auto}-\text{close}     |
| '\text{showProgressBar}'       | \text{boolean}                                   | \text{true}            | \text{Show} \text{a} \text{progress} \text{bar} \text{indicator}              |
| '\text{showToastCloseBtn}'     | \text{boolean}                                   | \text{true}            | \text{Show} \text{a} \text{close} ( \times ) \text{button} \text{on} \text{the} \text{toast}       |
| '\text{showSwalCloseBtn}'      | \text{boolean}                                   | \text{false}           | \text{Show} \text{a} \text{close} \text{button} \text{in} \text{SweetAlert} \text{dialogs}  |
| '\text{preventDuplicate}'      | \text{boolean}                                   | \text{false}           | \text{Prevent} \text{showing} \text{duplicate} \text{toasts}           |
| '\text{position}'              | \text{FlexiToastPositionType}                    | '\text{bottom}-\text{right}'  | \text{Position} \text{of} \text{the} \text{toast} \text{container}            |
| '\text{themeClass}'            | \text{FlexiToastThemeClassType} | \text{string}        | '\text{light}'         | \text{CSS} \text{class} \text{or} \text{theme} \text{for} \text{toast} \text{styling}       |
| '\text{cancelBtnText}'         | \text{string}                                    | '\text{Vazge}ç'        | \text{Text} \text{for} \text{the} \text{SweetAlert} \text{cancel} \text{button}      |
| '\text{confirmBtnText}'        | \text{string}                                    | '\text{Sil}'           | \text{Text} \text{for} \text{the} \text{SweetAlert} \text{confirm} \text{button}     |
| '\text{swalContentThemeClass}' | \text{FlexiSwalContentThemeClass}                | '\text{default}'       | \text{CSS} \text{class} \text{for} \text{SweetAlert} \text{content} \text{styling}   |


---

## \text{Styling} & \text{CSS} \text{Variables}

\text{Define} \text{your} \text{own} \text{colors} \text{and} \text{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';
}

License

MIT © Taner Saydam / Flexi UI

Crafted with ❤ for flexible toast notifications in Angular.