Toast and loading collision Ionic 2


#1

Hi there.

I have this code, to call a ionic 2 toast and loading emitting an event.
But the matter is that when I call the loading and then toast, just one appears and freeze the view.
Someone can help me to solve this please?

export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
loading: Loading;
toast: Toast;

constructor(
platform: Platform,
private menu: MenuController,
private events: Events
) {
platform.ready().then(() => {
StatusBar.styleDefault();
this.listenToEvents();
});

}

openPage(page:any) {
this.rootPage = page;
this.menu.close();
}

showLoading() {
this.loading = Loading.create({
content: “Cargando…”,
dismissOnPageChange: true
});
this.nav.present(this.loading);
}

showToast(message: string){
this.toast = Toast.create({
message: message,
duration: 3000
});
this.nav.present(this.toast);
}

hideLoading(){
if(this.loading instanceof Loading){
this.loading.dismiss();
}
}

hideToast(){
if (this.toast instanceof Toast){
this.toast.dismiss();
}
}

listenToEvents() {

this.events.subscribe('loading:show', () => {
  this.showLoading();
});

this.events.subscribe('loading:hide', () => {
  this.hideLoading();
});

this.events.subscribe('toast', (message:string) => {
  this.showToast(message);
});

}
}

ionicBootstrap(MyApp, [CustomHttp, Auth]);


#2

Self answered:

Have to destroy elements o dismiss event:

showToast(message: string){
let that = this;
this.toast = Toast.create({
message: message,
duration: 3000
});
this.toast.onDismiss(function(){that.toast.destroy();})
this.nav.present(this.toast);
}

hideLoading(){
if(this.loading instanceof Loading){
this.loading.dismiss().then(() => { this.loading.destroy();});
}
}


#3

Thanks for the hint; this.loading.destroy() solved another mystery for me. I am using the LoadingController’s dismissOnPageChange option which correctly dismissed the loading spinner when it got to my new page. But when I used the loader again a short time later, sometimes it didn’t show up. It turned out I needed to .destroy() it when I got to the new page, so it was ready to be created again.


#4

You saved me… thank you kind sir