LoadingController - Can I add a cancel button?

Ionic Framework ionic-v3
1

Hi All,

I am using the LoadingController, which works fine, but I would like to add a cancel button in there, in case no response is received from my data source, or the user just wants to go back to the last page. My code is something like this:


this.preloader = this.loadingCtrl.create({
content: `Loading available rooms <button ion-button icon-left>
	<ion-icon name="close-circle"></ion-icon>
	Cancel
	</button>`,
	});
		
	this.preloader.present().then(()=>{
	this.requestData();
	});

All I am getting is plaintext, as in the button never appears. Maybe there’s a better way of doing this? I could do this manually but am hoping I can keep using the LoadingController

1 Like
2

Add enableBackdropDismiss property, should be dismissed by tapping the backdrop

this.preloader = this.loadingCtrl.create({
       content:'Loading available rooms',
       enableBackdropDismiss: true
});
1 Like
3

@codiqa1000101513 adding a cancel button to a TypeScript code, is just the basics of it. Try googling ionic preloader + cancel button…

4

and to complement this harsh answer of me, every ionic button you create has a cancel scenario, you just need to display it and make it work, so that it goes back to the original page or cancel action.

Good luck with ionic,

5

These aren’t quite the solutions im looking for, but thanks for your effort guys. I think it’s something to do with angular making injected HTML safe, so its not rendering teh button, just showing the text ‘cancel’ with no click event available. If anyone else knows that would be great.

6

It sounds as though you should use the ToastController. Pass it your css, and set the onDidDismiss function to cancel the upload. Or if you finish the upload first, cancel the toast yourself.

7

But to complement my answer, every ionic button has a cancel scenario, you just need to fill it in the code.

Hope that help,

François

8

Either with OnDismiss or normal scenario you have to clicky to cancel.

François

9

And also, like @AaronSterling said, ToastControllers are very easy to create, and make nice notifications to any action created in your app.
I use it a lot in my app, it’s clean.

François

10

You can use loadingCtrl enableBackdropDismiss: true, as said by @yajuve and capture this event with loadingCtrl.onDidDismiss(_ => { /* do something here */ }). I used that with alertCtrl showing a prompt alert, which if clicked yes cancels the action and if it’s clicked no it shows the loading again (must be re-created). See if something like this suits your use case…

1 Like