I got the following Ionic code fragment for displaying alarms / errors in an industrial App:
showError(message: string) {
let toast = this.toastController.create({
message: message,
position: 'top',
duration: 5000,
cssClass: 'danger',
showCloseButton: true
});
toast.present();
}
The App triggers the error message every time it detects a connection issues, which will be also roughly on a 5 second timer.
Multiple calls to this method will lead to 2 or more error messages shown on top of each other if the timing of this code is changed. Can I somehow detect that a toast is already being displayed? Also then, the 5000 msec timer would not be necessary and I can just remove the error message again when the connection is re-established.
Thanks and BR Florian
You could store your Toast object in a variable outside your function, and call the dismiss() method before showing the next toast :
import { ToastController } from '@ionic/angular';
toast: HTMLIonToastElement;
showError(message: string) {
try {
this.toast.dismiss();
} catch(e) {}
this.toast = this.toastController.create({
message: message,
position: 'top',
duration: 5000,
color: 'danger',
showCloseButton: true
});
toast.present();
}
import { ToastController, Toast } from 'ionic-angular';
toast: Toast;
showError(message: string) {
try {
this.toast.dismiss();
} catch(e) {}
this.toast = this.toastController.create({
message: message,
position: 'top',
duration: 5000,
cssClass: 'danger',
showCloseButton: true
});
toast.present();
}
Here my solution :-)
// ToastService.ts
import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';
@Injectable()
export class ToastService {
private toasts: Toast[] = [];
constructor(private toastCtrl: ToastController) {}
push(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 1500,
position: 'bottom'
});
toast.onDidDismiss(() => {
this.toasts.shift()
if (this.toasts.length > 0) {
this.show()
}
})
this.toasts.push(toast)
if (this.toasts.length === 1) {
this.show()
}
}
show() {
this.toasts[0].present();
}
}
I had troubles using all of the answer pre-aug 20. The toast would still present multiple times. Fixed it as simple as checking and setting a boolean value to proceed or to not proceed. By setting it directly to true, it won't run multiple times.
isToastPresent = false;
async presentToast(message: string, color?: Colors, header?: string): Promise<void> {
if (!this.isToastPresent) {
this.isToastPresent = true;
const toast = await this.toastController.create({
message: message,
header: header || undefined,
duration: 3500,
position: 'top',
color: color || Colors.dark,
});
toast.present();
toast.onDidDismiss().then(() => (this.isToastPresent = false));
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With