I had this error in console with multiple ionic toast stacked on top of each other. This is how you would resolve this using Ionic 5 in Angular 12 projects.
Small update: I also encountered this when I dismissed a modal after it already was dismissed!
First, this is my component:
<ion-icon *ngIf="this.IsWatched"
class="cursor-pointer" size="24" src="/assets/icon/bell_watching.svg"
(mouseover)="presentToast('is_watching')"
(mouseleave)="dismissToasts()"
(click)="whatever()">
</ion-icon>
In my card.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {HttpErrorResponse} from '@angular/common/http';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
})
export class CardComponent implements OnInit {
@Input() Bundle!: Bundle;
IsWatched: boolean = false;
constructor(
public toastController: ToastController,
) {
}
async presentToast(type: string) {
this.toastController.dismiss().then((obj) => {
}).catch(() => {
}).finally(() => {
this.manageToast(type);
});
}
manageToast(type: string) {
let message = '';
switch (type) {
case 'not_watching':
message = 'x'
break;
case 'is_watching':
message = 'x'
break;
}
const toast = this.toastController.create({
message,
cssClass: 'toastbottom',
color: 'primary',
}).then((obj) => {
obj.present();
});
}
dismissToasts() {
if (this.toastController) {
this.toastController.dismiss();
}
}
}