ngx-action-toastr

DEMO: https://prabath95.github.io/

Features

• Tost dynamic component creation.
• Simple usage with out huge line of codes.
• AoT compilation and lazy loading compatible.
• Return observable to handle toast actions.

Install

1npm install ngx-action-toastr --save

@fortawesome/free-solid-svg-icons required for icons

1npm install @fortawesome/free-solid-svg-icons --save

Use

1import { ToastService, SimpleToast, ToastTypes, ToastPosition, ActionToast, Button, ButtonTypes } from 'ngx-action-toastr';
2
3@Component({...})
4export class YourComponent {
5  constructor(private toast: ToastService) {
6    this.setDefaults();
7  }
8
9  simpleToast() {
10     const options = new SimpleToast(
11      ToastPosition.RIGHT_TOP,
12      'Hey! its me Action Toaster.',
13      ToastTypes.SUCCESS
14    );
15    this.toast.createSimpleToast(options);
16  }
17
18  actionToast() {
19    const options = new ActionToast(
20      ToastPosition.RIGHT_TOP,
21      'Hey! its me Action Toaster.',
22      ToastTypes.SUCCESS
23    );
24    // for enable close button
25    option.closeButtonActive = true;
26    // close on click
27    option.isTapToClose = true;
28    // auto disappear in 5 sec
29    option.timeToDisplay = 5000;
30    // toast description
31    option.longMessage = 'This is a long text that describes more about the toast.'
32    options.buttons = [];
33    options.buttons.push(new Button('Confirm',ButtonTypes.SUCCESS))
34    options.buttons.push(new Button('Cancel',ButtonTypes.DANGER))
35    this.toast.createCustomToast(options).subscribe((toast) => {
36        console.log('Handle tost click events here')
37    });
38  }
39
40  setDefaults() {
41    const simpleToast = new SimpleToast(
42      ToastPosition.RIGHT_TOP,
43      '',
44      ToastTypes.DANGER,
45      Theme.CLASSIC
46    );
47    simpleToast.timeToDisplay = 6000;
48    simpleToast.closeButtonActive = true;
49    this.toastService.defaultConfig(simpleToast);
50  }
51
52  openSuccessToast() {
53    this.toastService.success('Hey! its me Action Toaster.');
54  }
55
56  openInfoToast() {
57    this.toastService.info('Hey! its me Action Toaster.');
58  }
59
60  openWarningToast() {
61    this.toastService.warning('Hey! its me Action Toaster.');
62  }
63
64  openDangerToast() {
65    this.toastService.danger('Hey! its me Action Toaster.');
66  }
67
68  openDefaultToast() {
69    this.toastService.default('Hey! its me Action Toaster.');
70  }
71}