Is anyone know how to give css of loading controller in ionic 4? I have tried all the solution which is availbale online but none of its working,so please help me.
I have made one service called loadingService for loading controller then i give css in gloabal.scss or variable.scss is still not working.here is my code.
loadingService.ts
async present() {
this.isLoading = true;
return await this.loadingController.create({
spinner: "lines-small",
duration: 10000,
cssClass:'loader',
}).then(a => {
a.present().then(() => {
console.log('presented');
if (!this.isLoading) {
a.dismiss().then(() => console.log('abort presenting'));
}
});
});
}
async dismiss() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('dismissed'));
}
gloabal.scss
.loader {
--background: #600001;
--spinner-color: yellow;
}
Please help me on it, and yes i am using ionic 4 so please give me ionic 4 solution not ionic 3.
Related
How to dismiss my simple Ionic 4 loader (spinner), when the data is ready?
There must be a simple way to do that, but somehow I cannot find a good example.
Spinner:
async runSpinner(loadingId: string) {
const loading = await this.loadingController.create({
id: loadingId,
message: 'Loading...'
});
await loading.present();
const { role, data } = await loading.onDidDismiss();
}
Data (when this is loaded, spinner should stop)
this.someService
.getCustomizationResult(requestData)
.subscribe(data => {
// if (data) {
// ...
});
I've tried to do it with setting a boolean, but it didn't work. Thanks in advance!
You could go for this approach:
use a boolean value to show/hide a loading spinner
set the spinner as active when you enter the page with ionViewWillEnter
when your data loads, set the spinner to false
don't forget to hide the spinner when your service sends an error, otherwise the spinner won't hide to show an error msg for example.
Example
<ion-content>
<ion-grid>
<ion-row *ngIf="spinner">
<ion-col size="12">
// You can customize this the way you want
<ion-spinner></ion-spinner>
</ion-col>
</ion-row>
<ion-row *ngIf="!spinner">
// When the data loads, show this ...
</ion-row>
</ion-grid>
</ion-content>
spinner: boolean;
ionViewWillEnter() {
this.spinner = true;
}
getCustomizationResult() {
this.someService
.getCustomizationResult()
.subscribe({
next: (data) => {
// data
this.spinner = false;
},
error: (error) => {
// error
this.spinner = false;
}
});
}
Check this one
const loading = await this.loadingController.create({
message: 'Loading...'
});
}
// start working
loading.present().then( async ()=> {
/////Call your services to get data
}).then( async() => {
loading.dissmiss();
});
I am trying to add a LoadingController to my Ionic 5 app.
With the below code, the loading spinner is appearing:
async presentLoading() {
const loading = await this.loadingCtrl.create({
message: 'Please wait...',
});
await loading.present();
}
getPosts() {
this.posts = [];
this.presentLoading();
query.get()
.then((docs) => {
docs.forEach((doc) => {
this.posts.push(doc);
})
}).catch((err) => {
console.log(err)
})
}
But I don't know how to dismiss the LoadingController once the posts array has been populated.
Can someone please show me how this is done?
You have to dismiss the controller. For that you will have to keep a reference to it, something like this,
async presentLoading() {
this.loading = await this.loadingCtrl.create({
message: 'Please wait...',
});
await this.loading.present();
}
getPosts() {
this.posts = [];
this.presentLoading();
query.get()
.then((docs) => {
docs.forEach((doc) => {
this.posts.push(doc);
this.loading.dismiss();
})
}).catch((err) => {
console.log(err)
})
}
If you need to get notice when the dismiss occurs, you can listen to onDidDismiss event.
Links:
Ionic Docs - LoadingController
I created a simple function of creating a loading like this
async presentLoading() {
const loading = await this.loadingController.create({
message: 'Please Wait...',
});
await loading.present();
}
And i am closing the loader when the data is fetch like this
getUserData(){
console.log(this.userID);
this.api.getCompanyEmploye(this.userID).subscribe(res => {
this.loadingController.dismiss(); //closing here
console.log(res);
this.user = res.records[0];
this.familyMembers = res.records[0].family_members;
});
}
I am calling both function in constructor
constructor(public loadingController: LoadingController){
this.presentLoading();
this.getUserData();
}
Its showing error of ERROR Error: Uncaught (in promise): overlay does not exist
The issue is that your API call responds sooner than the loading controller gets instantiated. Instead of parallel calls, you should try to serialize those this way:
Make your presentLoading method to return Promise:
async presentLoading() {
const loading = await this.loadingController.create({
message: 'Please Wait...',
});
return loading.present();
}
Now you can call it this way:
getUserData(){
this.presentLoading().then(()=>{
this.api.getCompanyEmploye(this.userID).subscribe(res => {
this.loadingController.dismiss(); //closing here
console.log(res);
this.user = res.records[0];
this.familyMembers = res.records[0].family_members;
});
})
}
And in your constructor you need only to call for the API
for me, the issue is simply because I don't have .catch() for the promise. As#Sergey suggested, this is because the loader is not ready when you calling the ionic loader
this.loadingController.dismiss()
.then(async () => {
await this.setStorageForLocalData(data);
})
.catch(console.error);
where .catch() will dismiss the error
I am using Ionic 4 and the Loading Controller.
async presentLoading() {
const loading = await this.loadingCtrl.create({
message: 'wait. . .'
});
return await loading.present();
}
Works great. But now I want to dismiss the loader programatically.
this.loadingCtrl.dismiss().then(a => console.log('dismissed'));
Even though I see 'dismissed' on my console (logging worked) the loading overlay continues. Any idea what might be the reason?
You not dismissing the actual loader that is displayed. You have to dismiss it with loading variable like below :
loading.dismiss().then(a => console.log('dismissed'));
Notice that I have used variable loading that you have declared for current loader.
If you want to dismiss programmatically use this in your service.
export class LoaderService {
private isLoading = false;
constructor(private loadingController: LoadingController) {
}
async presentLoading() {
// issue generated! so we used Boolean value to set loader dismissed call
firstly so we used this logic
this.isLoading = true;
let loading = await this.loadingController.create({
message: 'Please Wait',
spinner: 'bubbles'
}).then((res) => {
res.present();
if (!this.isLoading) {
// res.dismiss().then(()=> console.log('abort presenting'));
this.loadingController.dismiss().then(() =>
console.log('Dismissed'));
}
});
return loading;
}
async hideLoading() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('Dismissed'));
}
}
I am using ionic4 LoadingController in the app. it is dismissed after a given interval of time, but don't want like that. I don't want to set the time. before calling web api i will display LoadingController and I want to dismiss it whenever I will get the response from rest service. can anyone help me how to implement it?
You should do something like this:
async function presentLoading() {
const loader= document.querySelector('ion-loading-controller');
await loader.componentOnReady();
const element = await loader.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});
return await element .present();
}
// Initialize variable
private loader: any;
private loaderActive: boolean = false;
// Generic method to display the loader
async showLoader() {
this.loaderActive = true;
this.loader = await this.loadingCtrl.create({
message: 'Please wait...',
spinner: 'crescent',
});
await this.loader.present();
}
// Generic method to dismiss the loader
async dismissLoader() {
if (this.loaderActive === true) {
await this.loader.dismiss();
}
this.loaderActive = false;
}
Before api call just call the method this.showLoader(), once you get the response
just call the this.dismissLoader() method.
I would take a guess and say that you are using HttpClient to get your data from your rest service, therefore I would propose this scenario for you,
First of all we start by displaying the loader:
let loader = await this.loadingCtrl.create({
//Your loader content and options
});
loader.present();//show the loader
After that we get the data using the HttpClient. let suppose that we injected that's way public http: HttpClient so it depends on your rest service http mthod (post, get, put ...). the code would be:
this.http.get("url").subscribe((data: any) => {
//process your data here
loader.dismiss();//then we hide the loader
});
Leave me a comment if I misunderstood it.