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
}
}
}
Struggling to make observables work has been quite the challenge for me lately. My code now resembles a chaotic battleground rather than the organized structure it once was. The dreaded "ERROR TypeError: Cannot read property 'map' of undefined" ...
Currently, I am working on a form that includes an upload panel (mat-expansion-panel) for uploading documents. My goal is to indicate that this panel is required by adding an asterisk (*) next to it. While I know how to add the asterisk to <textarea&g ...
I am encountering an issue while trying to access a json file using http get. The error message I receive is as follows: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterable ...
One of the components I've created is being used in its parent component: <app-event-menu-nav [event]="event"></app-event-menu-nav> Below is the code for this component: import {Component, OnInit, ChangeDetectionStrategy, Input} ...
My backend app is being built using Express, Typescript, Typeorm, and Postgres. Let's consider a table named Restaurant with columns: restaurant_id order (Integer) quota (Integer) The aim is to set an upper limit on the number of orders a restaura ...
Hey there, I'm facing an issue with my component. Within my component, I have an input setter set up like this: @Input() set editStatus(status: boolean) { this.savedEditStatus = status; if (this.savedEditStatus === true && this.getTrigg === t ...
Here is the User class I am working with: class User { private _email: string; public get email(): string { return this._email; } public set email(value: string) { this._email = value; } ...
I have multiple classes that I would like to initialize using the following syntax: class A { b: number = 1 constructor(initializer?: Partial<A>) { Object.assign(this, initializer) } } new A({b: 2}) It seems to me that this ini ...
Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...
I want to retrieve all products from my API. Here is the code snippet for fetching products from the API. The following code snippet is functioning properly: const heh = () => { products.map((p) => console.log(p.id)) } The issue ari ...
After researching the combination of Typescript with React, I stumbled upon the type "ReactElement" and its definition is as follows: interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor< ...
Trying to incorporate ES6 modules into my app has been a bit frustrating. Initially, I attempted setting "module": "es2020" or "module": "esnext", only to encounter an error instructing me to specify "type": "module" in the package.json file or use the .m ...
I am working on a project that utilizes Angular as the front end and PHP as the back end. Both are installed in separate domains, with the PHP project fully completed and operational. I have created an API in PHP which I plan to call from Angular. My ques ...
The Issue I am experiencing difficulty in getting columns to expand to the size of their content upon grid rendering. Despite following the guidance provided in the official documentation example, and consulting sources such as Stack Overflow, I have att ...
I'm trying to use Axios for API communication and I keep encountering this error. Despite researching online and attempting various solutions, I am still unable to resolve the problem. Can someone please assist me? All I want is to be able to click on ...
I used a helpful guide on the webpack website to incorporate TypeScript into my existing React App. However, upon launching the app, an error message pops up saying: TypeError: Cannot read property 'lazy' of undefined The version of React being ...
I developed a compact UI toolkit and released it on the NPM registry. The library is built using strongly typed styled-components (TypeScript) and can be easily integrated into React applications. It functions perfectly after installation with npm install ...
My TypeScript project needs to be deployed as a JS NPM package, and it includes http requests using rxjs ajax functions. I now want to write tests for these methods. One of the methods in question looks like this (simplified!): getAllUsers(): Observable& ...
When working on http requests in Angular 6.0, I typically follow this block of code. I attempted to incorporate the newer features introduced in Angular 8.0 such as HttpClient, HttpResponse, and HttpHeaders. However, I found that the syntax did not align ...
My Angular 2 component subscribes to a service based on the URL hash without calling any subcomponents. I am wondering if I should use Route or Location for this scenario, and how can I listen for and react to a pop state event? ...