.ts
initialize() {
const loadingScreen = await this.loadingService.displayLoader();//loading screen
this.products$ = this.bikeShopService.retrieveData();//Observable operation
}
.html
<ion-col size="6" *ngFor="let product of (products$ | async)?.result[0]?.categories[0]?.ShoppingCart;">
<app-bike-shop-item [info]="product"></app-bike-shop-item>
</ion-col>
loader.service.ts
@Injectable({
providedIn: 'root'
})
export class LoaderService {
constructor(private loadingCtrl: LoadingController) { }
async displayLoader(message = 'Please wait...'): Promise<HTMLIonLoadingElement> {
const loader = await this.loadingCtrl.create({
message: message,
});
loader.present();
return loader;
}
removeLoader(loader: HTMLIonLoadingElement): Promise<boolean> {
if (loader) { return loader.dismiss(); }
}
}
Q: Is it possible to determine when the loading icon should be removed based on the completion of the subscription in the template using the async pipe? I don't have access to the .ts file completion event for the subscription. Using a fixed duration parameter is not an ideal solution as we cannot predict the data retrieval time accurately.