In the various services that I am using, I implement a method to load content. Each service has its own loadController to display a loading window. How can I detect if a loading window already exists in order to prevent showing a new one?
*Please note: I need to detect this in the service, not in the component.
Check out this snippet of code that I've been using for a different purpose, but thought it might be helpful:
import { Nav, Platform, IonicApp, ... } from 'ionic-angular';
@Component({
selector: 'page-custom',
templateUrl: 'custom.html'
})
export class CustomPage {
constructor(private platform: Platform,
private ionicApp: IonicApp) {
// ...
}
public displayNewModalByClosingCurrentOne(): void {
let activePortal = this.ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (activePortal) {
// Dismiss the currently active portal
activePortal.dismiss();
activePortal.onDidDismiss(() => {
// Add logic to show the new modal here...
});
return;
}
}
// Alternatively, you can utilize the `activePortal` property to prevent
// displaying another loading screen before closing the current one.
public displayNewModal(): void {
let activePortal = this.ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (!activePortal) {
// Show your new modal here
}
}
}
I am currently developing a tool that allows users to draw bounding boxes on images using the Canvas and Angular. Everything was working smoothly until I encountered an issue with zooming in on the canvas causing complications when trying to draw bounding ...
I'm currently facing a challenge while attempting to consolidate all the files in my Typescript project, along with their dependencies from node_modules, into a single file using Webpack. Despite trying multiple options, it seems that only the entry f ...
As a newcomer to Ionic2, I'm facing some beginner obstacles. Despite my extensive search efforts, I haven't been able to find any examples related to my issue. My current goal is to write a file to a specific directory on the device using Ionic2 ...
I have been attempting to center an icon within a material toolbar, but it seems to be offset slightly to the right due to a second image on the left side. Here is my code: <mat-toolbar color="primary"> <mat-toolbar-row> <span> < ...
I am currently setting up the Azure Service Bus messaging infrastructure for my team, and I am working on establishing best practices for developing Service Bus message receivers. We are in the process of creating a new service to consume the Service Bus m ...
In my current situation, I encountered the following scenario: I have a service that makes Http calls to an API and requires access to user data to set the authentication header. Below is the function that returns the observable used in the template: get ...
To update #box in <p>, I need to give a random value to the (keyup) attribute. Here's an example: <!-- The value on the right of equality sign for (keyup) doesn't matter --> <input #box (keyup)="some_random_value" placeholder ...
I am facing an issue with my Angular project that has a git submodule for the backend. When I build the project on my local machine, it is successful. However, when I try to build it on Travis, it fails. npm ERR! enoent ENOENT: no such file or directory, ...
I am conducting research on the best methods for transitioning a large single-page application into a micro-frontend architecture. The concept: The page is made up of multiple components that function independently Each component is overseen by its own ...
I am encountering a similar problem as discussed in Angular 2 - AOT - Calling function 'ChartModule', function calls not supported ERROR: Error encountered while resolving symbol values statically. Trying to call function 'ChartModule&apos ...
My current challenge involves attempting to drag one card over another card in order to effectively "merge" or "combine" them, similar to the action of dragging an image onto a folder on a desktop. Despite utilizing HTML5 native drag and drop functionalit ...
As I delve into the Redux pattern, I realize the importance of storing only plain objects in the Store. However, I find myself wanting to use more complex objects with methods like "hasParent", "isReadonly", and "isValid" in my application. While ngrx all ...
The Angular modules documentation provides an example of a module that includes a template, a component, and a provider. This module is then imported into the root module and instantiated by using the element defined by the component like this: <app-co ...
Currently, I am attempting to integrate a dropdown feature into a div element. The HTML code for the dropdown is generated dynamically within the code. When clicking on the dropdown button, it appears functional but unfortunately, the dropdown itself does ...
Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. code .html <div class="margin-top-47 margin-horizontal-10" #hel ...
I followed a tutorial to apply the bootstrap 5.3.0 style to my navigation bar, but the outcome looks different from what was shown in the tutorial. This is the HTML code for the navigation component: <nav class="navbar navbar-default"> & ...
I'm currently working with the latest version of Angular and I'm attempting to implement a custom validation for checking a code through a RestAPI. The example below is functional, but it doesn't trigger on keypress events; it only activates ...
Within my project, I have a file named sorting.helper.ts that contains all of my sorting methods: In another file, I then called upon these methods. How can I ensure that both files are included in the code coverage analysis for my .spec file? import { C ...
I have implemented Angular Universal in my application along with prerendering. The specific paths that I have set for prerendering are as follows: / /about /login Interestingly, the only path that utilizes transfer state is: /:id Upon building and run ...
One of my challenges involves using a specialized HttpService that inherits from Angular's native Http: export class HttpService extends Http { } I am trying to figure out how to intercept/override the response: My attempt to do this looks like: r ...