# LoadingController - Can I add a cancel button? **URL:** \ **Category:** ionic-v3\ **Created:** [December 12, 2017, 6:49pm UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156 "2017-12-12T18:49:38Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![codiqa1000101513](https://avatars.discourse-cdn.com/v4/letter/c/6f9a4e/32.png) [@codiqa1000101513](https://forum.ionicframework.com/u/codiqa1000101513)\ **Post date:** [December 12, 2017, 6:49pm UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/1 "2017-12-12T18:49:38Z")
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: ```auto this.preloader = this.loadingCtrl.create({ content: `Loading available rooms `, }); 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 ---
**Author:** ![yajuve](https://avatars.discourse-cdn.com/v4/letter/y/2bfe46/32.png) [@yajuve](https://forum.ionicframework.com/u/yajuve)\ **Post date:** [December 13, 2017, 7:56pm UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/2 "2017-12-13T19:56:52Z")
Add **enableBackdropDismiss** property, should be dismissed by tapping the backdrop ```auto this.preloader = this.loadingCtrl.create({ content:'Loading available rooms', enableBackdropDismiss: true }); ``` ---
**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\ **Post date:** [December 14, 2017, 12:29am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/3 "2017-12-14T00:29:55Z")
@codiqa1000101513 adding a cancel button to a TypeScript code, is just the basics of it. Try googling ionic preloader + cancel button… ---
**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\ **Post date:** [December 14, 2017, 12:33am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/4 "2017-12-14T00:33:22Z")
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, ---
**Author:** ![codiqa1000101513](https://avatars.discourse-cdn.com/v4/letter/c/6f9a4e/32.png) [@codiqa1000101513](https://forum.ionicframework.com/u/codiqa1000101513)\ **Post date:** [December 14, 2017, 2:41am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/5 "2017-12-14T02:41:02Z")
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. ---
**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\ **Post date:** [December 14, 2017, 3:34am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/6 "2017-12-14T03:34:22Z")
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. ---
**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\ **Post date:** [December 15, 2017, 12:35am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/7 "2017-12-15T00:35:32Z")
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 ---
**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\ **Post date:** [December 15, 2017, 12:37am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/8 "2017-12-15T00:37:01Z")
Either with OnDismiss or normal scenario you have to clicky to cancel. François ---
**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\ **Post date:** [December 15, 2017, 1:08am UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/9 "2017-12-15T01:08:32Z")
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 ---
**Author:** ![giovannipds](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/giovannipds/32/119855_2.png) [@giovannipds](https://forum.ionicframework.com/u/giovannipds)\ **Post date:** [December 18, 2018, 1:19pm UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/10 "2018-12-18T13:19:47Z")
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… ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:59pm UTC](https://forum.ionicframework.com/t/loadingcontroller-can-i-add-a-cancel-button/115156/11 "2021-07-19T21:59:31Z")
Closed on July 19, 2021, 9:59pm UTC