Ionic-framework: Toast unable dimiss

[jeffreytck]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Currently, my application will display toast after user logged in and will not dissappear if user doesn't click on it and only will dissappear on two action. 1) Click on it, 2) User logged out
But it doesn't dismiss after user logged out.

events.subscribe('user:login', (userEventData) => {
      this.showToast(true);
});
events.subscribe('user:logout', () => {
      this.showToast(false);
});
showToast(dat) {
    let toast = this.toastCtrl.create({
    message: 'Welcome',
    showCloseButton: true,
    position: 'bottom',
    closeButtonText: 'GO TO'
   });

   if(dat) {
      toast.onDidDismiss((obj) => {
        if(this.filterList[0].status==="SUBMITTED") {
          this.nav.push(TNCModalPage, {pageCode: "reLend", loanId: this.filterList[0].loanId});
        } else if(this.filterList[0].status==="APRV_PEND_ACPT") {
          this.nav.push(TransactionDetailPage, {loanId: this.filterList[0].loanId});
        }
      });

      toast.present(toast).then(() => {
        console.log('123232');
      });
    } else {
      toast.dismiss(toast).then(() => {
        console.log('sccccc');
      }) ;
    }
  }

Expected behavior:

The events had been trigger in order but it doesn't dismiss the toast as well.

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[manucorporat]

You code does not make any sense. Each time you call showToast() you create a new Toast then you try to dismiss it (you dismiss a toast that has never been presented)

Since this looks more like a support request than a bug report, I am closing this. Feel free to open the question in the forums.

[jeffreytck]

My events subscribe when user login/logout then this events will go thru this showToast function based on boolean passed. This code had been written in app.component.ts file. When user login, it will ask toast to create and display, and will dismiss when user logged out. What your means doesn't make any sense?

[mburger81]

You have to do toast.present() to show it

[jeffreytck]

@mburger81 , Yes, once user login and toast able show, but there is unable to dismiss once user logout.

[mburger81]

Is this an @Injectable service?? Why do you pass toast into toast.present and toast.dismiss?

Aaaa OMG

On every showToast you always create a NEW INSTANCE of toast!!!! So toast.dismiss will never work!!!!

:scream:

[jeffreytck]

@mburger81 , so how to do with it, this code written in app.component.ts. My business logic is show toast once user logged in and dismiss when user logged out. I'm controlling this by using events.subscribe and call toast to present and dismiss. Any idea / suggestion? Thanks 👍

[mburger81]

Simple!!! The toast instance of your

let toast = this.toastCtrl.create({
    message: 'Welcome',
    showCloseButton: true,
    position: 'bottom',
    closeButtonText: 'GO TO'
   });

Must be the same for present and dismiss call.
This is not an ionic or angular question, this is a simple programming question.

This what you are doing here does not wok on Java, .NET. C++ or any other language.

events.subscribe('user:login', (userEventData) => {
      this.showToast(true);
     ->>>> this is creating a new instance of your toast message <<<<<<<<<---
});
events.subscribe('user:logout', () => {
      this.showToast(false);
     ->>>>  this is creating also a new instance of the new toast message, and NATURALLY you can not close thits!!!! You have to close the same instance of the created one before <<<<<<<<<---
});

[manucorporat]

You obviously have to keep a reference of the original toast you presented:

this.toast = toast;

then (on close):

if(close && this.toast) {
  this.toast.dismiss();
  this.toast = null;
}

[mburger81]

Yes, this is one of the possible solutions.
The simplest one, keep only the reference :smile:

[jeffreytck]

@manucorporat , @mburger81 thanks, i will try it out.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.