My usual approach involves creating a library folder (or module if desired) where I define various providers. For instance, to handle alerts, I typically create a provider like this:
import { Injectable } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Injectable()
export class Alert {
constructor(
public alertCtrl: AlertController
) {}
show(title: string, subTitle: string, buttons: Array<string>): void{
let alert = this.alertCtrl.create({
title: title,
subTitle: subTitle,
buttons: buttons
});
alert.present();
}
}
For tasks like loading indicators, I might create a provider as follows:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
@Injectable()
export class Loader {
loader: any;
constructor(
public http: HttpClient,
public loadingCtrl: LoadingController
) {}
present(msg = `Please wait...`) {
this.loader = this.loadingCtrl.create({
content: "Please wait..."
});
this.loader.present();
}
dismiss() {
this.loader.dismiss();
}
}
These providers can then be easily imported and used in different components by simply referencing the module path mapping, like so:
import { Alert, Toast } from '@lib';
In my opinion, this is a recommended practice as it allows for code reusability and reduces redundancy in writing similar functionalities. Hope this explanation helps!