Where to put a function that is a UI function

Ionic Framework ionic-v3
1

Dear All,

One thing I have been wondering for a while is simply where to put a UI related function.

Taking something simple like this:

goToPageWithMessage(page:string, msg:string = ‘’) {
if (msg == ‘’) {
// No need for the loading controller message,
// just push the navigation
this.navCtrl.push(page);
} else {
let loading = this.loadingCtrl.create({
content: msg
});
loading.present();
setTimeout(() => {
this.navCtrl.push(page);
}, 1000);
setTimeout(() => {
loading.dismiss();
},3000);
}
}

So this obviously works with lazy loading of pages, accessing them via strings. This is a useful function for me, across several pages. So where do I put it, so I only have one place it can be called from?

Any help greatly appreciated

Kind Regard

Simon

2

Your use of setTimeout is suspicious. But one answer to your question is to create an independent ts file, a helper function file. Then your function looks something like

export function navControlExample(navCtrl: navController, pageName: string) {
  navCtrl.push(pagename);
}

To use the function, you import it and pass the local NavController as a parameter.

3

Thanks Aaron. setTimeout is ok in this situation afaik, since you literally only want to show the alert for a couple of seconds rather than it being some sort of business logic function. It’s also on the official docs:


But if you can explain why it’s suspicious, that would be a good learning process for me, so please go ahead :slight_smile:
I think I get your example thank you, I will try it now, see how it goes and let you know.

Kind Regards

Simon

4

That looks like an example so you see how the spinner works, not like something to actually use in the real world. Because different devices might have different lengths of time before page transition, so why guess with a fixed value?

I have used setTimeout in the “other direction” with loading spinners – only allowing them to show if an operation takes more than 2 seconds, for example. But that 2 seconds is identical across all devices.

5

I see what you mean. But this is the example from the ‘Show Loading and Navigate’ button at the bottom. It’s just a nice way of reporting a missing setting error and sending them to my settings page asking them to fill in the form.

How do you mean identical across devices. It’s all measured in milliseconds I thought? I think I see what you mean, but I would have to see firm evidence that difference devices have wildly different page transition times. In the use case I’m in, it’s fine though I think.

Thanks for your help Aaron :slight_smile:

6

What if someone’s on an old phone and it takes 4 seconds to see the new page? maybe a minor point. But I would show and dismiss the loading controller based on the ViewController saying I was leaving a page and had entered the next page, instead of guessing how long it would take.

7

Well they should totally upgrade then! Serve them right… :slight_smile:

But yeah, it’s actually a better of doing it your way, mate I hadn’t thought about that in the rush to get it done.

Your main example did the job, so thank you for that.