How can I disable the button click in my Ionic 3 Angular app until the toast message gets dismissed?

Question

Currently I am using a button to show some information in toast. when the button is clicked, the toast will display the message. Currently, the toast duration is set to 2 seconds. I need to disable the button click for the 2 seconds when the toast is active, if it gets dismissed,the button can be able to click again. ie, We should not be able to click the button until the toast message gets disappeared.

Here are my implementations:

in my HTML:

<button ion-button class="my-button" type="button" full (click)="message()">
                            Click Me
                        </button>

In my ts file:

message() {

        this.message.alert('Hi Welcome');

    } 

I am using the toast controller in message service as follows:

export class MessageService {

  constructor(public toastCtrl: ToastController) {}

  private toast(message: string) {
    const toast = this.toastCtrl.create({
      message: message,


      duration: 2000
    });
    toast.present();

  }

  error (message: string) {
    this.toast(message);
  }

  info(message: string) {
    this.toast(message);
  }

  warning(message: string) {
    this.toast(message);
  }


  alert (message: string) {
    this.toast(message);
  }
}

I have actually implemented the toast, but I don't know how to disable the button click temporarily for 2 seconds.

Answer 1

You can use a boolean variable that is set to true for 2 seconds:

toastOpen: boolean = false;

private toast(message: string) {
    const toast = this.toastCtrl.create({
        message: message,
        duration: 2000
    });
    toast.present();

    this.toastOpen = true;

    // reset after 2 seconds
    setTimeout(() => {
        this.toastOpen = false;
    }, 2000);

    // alternative solution proposed by troy-myers:
    // toast.onDidDismiss(() => { this.toastOpen = false; }); }

Use this variable to disable your button:

<button ion-button class="my-button" type="button" full (click)="message()" [disabled]="toastOpen">
    Click Me
</button>

Edit: If you also want to block the click action completly add:

message() {
    if(!this.toastOpen) {
        this.message.alert('Hi Welcome');
    }
} 

Answer 2

You could modify you service to return the instance of the Toast , like this:

import { Toast } from 'ionic-angular';

export class MessageService {

  constructor(public toastCtrl: ToastController) {}

  private toast(message: string): Toast {
    const toast = this.toastCtrl.create({
      message: message,
      duration: 2000
    });

    return toast;
  }

  error (message: string): Toast {
    return this.toast(message);
  }

  info(message: string): Toast {
    return this.toast(message);
  }

  warning(message: string): Toast {
    return this.toast(message);
  }

  alert (message: string): Toast {
    return this.toast(message);
  }
}

Then in your page create a new property to know when the button should be enabled/disabled and modify the message method like this:

public isDisabled: boolean = false;

// ...

message() {

  // Disable the button
  this.isDisabled = true;

  const toast = this.message.alert('Hi Welcome');
  toast.onDidDismiss(() => {
     // Enable the button when the toast is dismissed
     this.isDisabled = false;    
  });

  // Show the toast
  toast.present();
} 

And then use that property in the button:

<button [disabled]="isDisabled" ion-button class="my-button" type="button" full (click)="message()">
  Click Me
</button>