ToastData missing in Toastr

Question

I had ng2-Toasty implemented in my old Angular 5 application. I am trying to use ngx-toastr since ng2-Toasty doesnt support Aungular 8.

If you see below , the ngx-toastr doesnt seem to have an equivalent of ToastData

ng2-toasty

import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty';

ngx-toastr

import { ToastrService, ToastConfig, ToastOptions} from 'ngx-toastr';

This is how it was used previously in code

var timeOutSeconds = message.timeOutSeconds ? message.timeOutSeconds * 1000 : 4000;

    let toastOptions: ToastOptions = {
      title: message.summary,
      msg: message.detail,
      timeout: isSticky ? 0 : timeOutSeconds
    };

    if (isSticky) {
          toastOptions.onAdd = (toast: ToastData) => this.stickyToasties.push(toast.id);

          toastOptions.onRemove = (toast: ToastData) => {
            let index = this.stickyToasties.indexOf(toast.id, 0);

            if (index > -1) {
              this.stickyToasties.splice(index, 1);
            }

            toast.onAdd = null;
            toast.onRemove = null;
          };
        }

Any idea what is the equivalent implementation using ngx-toastr

replacing ToastData as it doesnt seem to be there in ngx-toastr — Tom, Sep 03 '19 at 09:14
yeah but what is toast data? what are you trying to do with it? e.g. When X happens, I want Y to happen. ngx is simple in its implementation. You give the root module settings for how long toasts should appear, duplicates etc. then fire the toast events when you need through the injected service — James, Sep 03 '19 at 09:22
ng2-toasty had a lot of messy part initialising the ToastOptions. ngx-toastr doesn't need such complex initialisation or options, you can simply use it. — Deepika Wadhera, Sep 03 '19 at 09:25

Matt Walterspieler · Answer 1 · 2019-09-03T09:31:59.013

In the documentation there is an interface that describes the methods you need; onShown, onHidden, onTap, onAction.

export interface ActiveToast {
  /** Your Toast ID. Use this to close it individually */
  toastId: number;
  /** the message of your toast. Stored to prevent duplicates */
  message: string;
  /** a reference to the component see portal.ts */
  portal: ComponentRef<any>;
  /** a reference to your toast */
  toastRef: ToastRef<any>;
  /** triggered when toast is active */
  onShown: Observable<any>;
  /** triggered when toast is destroyed */
  onHidden: Observable<any>;
  /** triggered on toast click */
  onTap: Observable<any>;
  /** available for your use in custom toast */
  onAction: Observable<any>;
}

Example

const toaster = this.toastrService.success('OK');
toaster.onShown.subscribe(()=>{
   this.stickyToasties.push(toast.id);
});
toaster.onHidden.subscribe(()=>{
  let index = this.stickyToasties.indexOf(toast.id, 0);
  if (index > -1) {
    this.stickyToasties.splice(index, 1);
  }
});

score 0 · Answer 2 · answered Sep 03 '19 at 09:50

0

Replacement of ng2-toasty with ngx-toastr for this code can look something like this. Please try and let me know:

 var timeOutSeconds = message.timeOutSeconds ? message.timeOutSeconds * 1000 : 4000;

  this.toastrService.success(message.title, message.summary, {
    timeOut: isSticky ? 0: timeOutSeconds
  });

  if (isSticky) {

     this.ActiveToast.onShown.subscribe((toast)=>{
            this.stickyToasties.push(toast.id);
        })

     this.ActiveToast.onHidden.subscribe((toast)=>{

        let index = this.stickyToasties.indexOf(toast.id, 0);

        if (index > -1) {
          this.stickyToasties.splice(index, 1);
        }

        toast.onAdd = null;
        toast.onRemove = null;
     })

  }

answered Sep 03 '19 at 09:50

Deepika Wadhera

200
1
8

I can see that you have replaced the toastoptions. Isnt there a toastoptions in ngx-toastr. I am passing toast options further in my code below case MessageSeverity.info: this.toastrService.info(toastOptions); break; case MessageSeverity.success: this.toastrService.success(toastOptions); break; case MessageSeverity.error: this.toastrService.error(toastOptions); break case MessageSeverity.warn: this.toastrService.warning(toastOptions); break; – Tom Sep 03 '19 at 10:20
No, there are no options. What you can do alternatively is to save the title, message, time in variables and then pass them like: case MessageSeverity.info: this.toastrService.info(title, msg, {timeout: time}); break; case MessageSeverity.success: this.toastrService.success(title, msg, {timeout: time}); break; case MessageSeverity.error: this.toastrService.error(title, msg, {timeout: time}); break case MessageSeverity.warn: this.toastrService.warning(title, msg, {timeout: time}); break; – Deepika Wadhera Sep 03 '19 at 10:31
You have mentioned the use of this.ActiveToast isnt that an interface. I have tried to use that in the import and injected in the constructor and getting eror Generic type 'ActiveToast' requires 1 type argument(s). I have imported it this way import { ToastrService, ToastrConfig, ActiveToast, ToastData } from 'ngx-toastr'; and injected it this way constructor(storageManager: LocalStoreManager, private toastrService: ToastrService, private toastyConfig: ToastrConfig, private activeToast: ActiveToast) – Tom Sep 03 '19 at 10:53
Also could you explain what is toastData in your code. in my code toastdata was toast: ToastData. So your code is not replacing the funtionality of toastdata – Tom Sep 03 '19 at 11:37

score -1 · Answer 3 · answered Sep 03 '19 at 09:15

-1

You simply have to call the following functions in order to show a toastr when you're using ngx-toastr

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello Success!', 'Toastr fun!');
  }

  showError() {
    this.toastr.error('Hello Error!', 'Toastr fun!');
  }

  showInfo() {
    this.toastr.info('Hello Info!', 'Toastr fun!');
  }

  showWarning() {
    this.toastr.warning('Hello Warning!', 'Toastr fun!');
  }
}

This will also help you in understanding the exact implementation: DEMO: https://ngx-toastr.netlify.com/

answered Sep 03 '19 at 09:15

Deepika Wadhera

200
1
8

@Tom, please give a proper explanation to what you're trying to do here so that I could help you. – Deepika Wadhera Sep 03 '19 at 09:24
I am basically new to both ng2-toasty and ngx-toastr. As I can see ng2-toasty references library ToastData and I have shared the code above to show how ToastData is used in the code. I am basically trying to see how to get that part of the code replaced with ngx-toastr – Tom Sep 03 '19 at 09:29
I've posted another answer. Please try and let me know. – Deepika Wadhera Sep 03 '19 at 09:50

ToastData missing in Toastr

3 Answers3