How to dismiss LoadingController once a method inside is complete?

Question

I am creating a LoadingController below, presenting it, & executing some methods:

this.loadingCtrl.create({
      message: 'Sending Message...'
    }).then(loadingEl => {
      loadingEl.present();
      this.conversationsService.addMessageToConversation(this.conversation.id, this.form.value.message);
      this.loadMsg();
      this.form.reset();
    });

Once addMessageToConversation() is successfuly, I then want to dismiss the LoadingController.

Can someone please tell me how I can do this?

Here is addMessageToConversation() in case it is required:

addMessageToConversation(conversationId: string, message: string) {
    this._conversations.getValue().find(conversation => conversation.id === conversationId)
      .messages.push(
        new Message(
          Math.random().toString(),
          message,
          this.authService.userId,
          new Date(Date.now())
        ));
  }

Answer 1

There are two ways to do this.

1. You can emit an event once your method is completed.
2. You can return the Promise created by.find() method from your object. From there in your component code you can use async/await or.then() to call the.dismiss() of your loading controller.

I'd suggest using Method #2 as that is "normal". Once your turn the service's method into a promise you can adjust your code as follows:

 this.loadingCtrl.create({ message: 'Sending Message...' }).then(async loadingEl => { loadingEl.present(); const res = await this.conversationsService.addMessageToConversation(this.conversation.id, this.form.value.message); this.loadMsg(); this.form.reset(); this.loadingCtrl.dismiss() });

• NOTE: this is not complete, so I was not able to test for syntax errors. Hopefully you get the point.