ng-toast-notify
Version: 
Lightweight and flexible toast notifications for Angular
75 lines (60 loc) • 1.85 kB
Markdown
# NgToastNotify
Lightweight and flexible toast notifications for Angular simply and effective, perfect to notify the user with short customized messages 
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
[](https://www.npmjs.com/package/ng-toast-notify)
[Live demo and documentation](https://rickmarina.github.io/ng-libraries/#/ng-toast-notify)
## Installation
### Install via npm
```bash
npm install ng-toast-notify
```
### Add component
Add the <toasty> placeholder component in your HTML and ensure you have the required imports in your component.ts.
component.html
```bash
<toasty></toasty>
```
component.ts 
```bash
import { ToastType, ToastyComponent, ToastyPromise, ToastyService } from 'ng-toast-notify'; 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToastyComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {}
```
### Service
Add the ToastyService to your component and use it to display toasts.
Inject the service in your component:
```bash 
constructor(private _toastyService: ToastyService) { }
```
### Display a basic toast!
Use the service to display toasts:
```bash
this._toastyService.showToast('Title', 'Message body');
```
### Toast types
1. Simple toast, title and message
2. Info toast
3. Success toast
4. Warning toast
5. Error toast 
6. None toast 
7. Html message toast 
8. Custom css toast 
9. Long message
10. Loading icon
11. Promise toast
12. Emoji
13. Component toast
### Toast features 
1. Close on swipe
2. Notify sound (beep)
3. Progress bar
4. Sticky toast (have to be closed manually)
5. Group duplicate toasts
6. Schedule toasts