UI components handling service



we use the latest version of Ionic at our workplace to build quite large app and I got an idea for service which would be really easy to use.

Problem: When you have a large application with many pages, you need to inject ToastController in each of them just to show a toast saying something generic like ‘No connection’. The descriptions of components using componentController.create({…}) take up many lines of code in page components which result in being almost unmanageable. Also passing callbacks into onDidDismiss is kind of weird.

My idea: Create a custom service which would have methods returning something like an Observable. You could subscribe to it which would present the component. If you passed a callback into subscribe, that would be onDidDismiss function which would get the data from dismiss. You could pass an error function as well because in some cases (e. g. Alert with OK and cancel button or Alert with text input) you could use an error too and it would be well readable. The last part of this would be the unsubscribe method on our Subscriber which would destroy the component. I don’t know how to implement the last part because as far as I know there is nothing like onUnsubscribe in Observable (I know about add in Subscriber, but that’s not what I need).


// Our service automatically translates the text
let toast = this.componentService.createToast(‘HELLO_WORLD’);
toast.subscribe(); // This would just show the toast and hide it after whatever timeout you choose

Another one:

this.passwordAlert = this.componentService.requirePassword();

this.passwordAlert.subscribe(password => {
// Alert is dismissed now and here’s your data.
}, () => {
// User didn’t fill in their password

somethingHappenedAndAlertAskingForPasswordIsNoLongerNeeded() {
this.passwordAlert.unsubscribe(); // Equivalent of dismiss method in Alert.

Does it make sense? How much of performance would this cost? Why has no one thought of it yet (in Ionic)?

Thanks for your time.