Toast not always dismissed

Ionic Framework ionic-v3
1

Hi,
I would like to create a button which when pressed shows a toast message saying that the application is recording something and the recording is started. When the button is released the toast disappears and of course the recording is stopped.
This is the code I’ve created:

import { Component } from '@angular/core';
import { NavController, IonicPage, Toast } from 'ionic-angular';
import { AlertController, ToastController} from "ionic-angular";

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  recording = false;
  toast:Toast;

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    private toastController: ToastController
  ) {

  }

  startRecording() {
    console.log('start recording');
    this.recording = true;
    this.presentToast();
  }

  stopRecording() {
    console.log('stop recording');
    this.recording = false;
    this.toast.dismiss();
  }

  presentToast() {
    this.toast = this.toastController.create({
      message: 'Recording...',
      position: 'top'
    });

    this.toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    this.toast.present();
  }

}

On the HTML page I have the following button:

  <button ion-button [color] = "((recording) ? 'danger' : 'primary')" (mousedown)="startRecording()" (mouseup)="stopRecording()">
    <ion-icon name="mic"></ion-icon>
  </button>

The problem is that sometime the toast is not dismissed and remains on the screen. This behaviour is much more visible if I deploy the application on my iPhone (in this case I’ve of course to replace the button events with ‘touchstart’ and ‘touchend’ respectively).

How can I achieve this?

2

You forgot to set the Duration of the Toast.

Simply add this -> duration: 3000,


  presentToast() {
    this.toast = this.toastController.create({
      duration: 3000,
      message: 'Recording...',
      position: 'top'
    });

    this.toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    this.toast.present();
  }
3

Hi Cherry,
thanks for your answer.
I didn’t put the duration here on purpose, because I want to dismiss the toast manually, as soon as the user releases the button for recording audio. However I’ve also tried to use the duration parameter, by setting it to a very high number like “30000”, but the problem still occurs.
Just to clarify what I want to do: I want to achieve the same behaviour of the audio recording button on the Whatsapp application.

Regards,
Simmaco