What is the best way to make uiSignal function properly within nested asynchronous calls?

Utilizing the rxjs library in a component, I came across something called uiSignal within it. My goal is to use this to show a 'loading' screen while making subscription calls. It works well for simple calls, but when there are nested subscriptions, it fails to wait for the nested call to finish.

For instance:

this.Service.DoSomething(this.thing)
            .uiSignal({ uiLabel: 'Loading', debugInfo: '' }).subscribe(thing => {

    this.nestedMethod();
}

nestedMethod() {

    this.Service.DoSomethingElse(this.OtherThing).subscribe(otherThing => {
        // Do Something Else
    }
}

The loading screen only appears during the 'DoSomething' subscription and disappears before the completion of the DoSomethingElse subscription. I attempted adding the uiSignal on the 'DoSomethingElse' subscription in the nestedMethod as well, but it did not work.

Essentially, I want the loading screen to stay visible until the nested method has finished executing.

Answer №1

Consider incorporating switchMap:

this.Service.DoSomething(this.thing)
  .pipe(
    switchMap((res) => this.nestedMethod())
  )
  .uiSignal({ uiLabel: 'Loading', debugInfo: '' })
  .subscribe(thing => {});

nestedMethod() {
  return this.Service.DoSomethingElse(this.OtherThing);
}

The implementation above aims to synchronize the completion of both observables before triggering the uiSignal.

Answer №2

In order to solve this issue, I ultimately opted for Observable.forkJoin as recommended in this article:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling generic types by identifying implementation details

In the process of developing a tool, I am faced with the task of resolving generic types for the final output. It's worth mentioning that I am making use of the ts-morph library. To illustrate, let's consider the following source code where the ...

Construct this node project utilizing either gulp or webpack exclusively

In the structure of my project, you will find various folders like node, build, gulp, and src. These folders contain important files for the development process such as .gitignore, gulpfile.js, package.json, tsconfig.json, webpack.config.js, server.js, con ...

Deactivate multiple textareas within a loop by utilizing JQuery/Typescript and KnockoutJS

I am working on a for loop that generates a series of textareas with unique ids using KO data-binding, but they all share the same name. My goal is to utilize Jquery to determine if all the textareas in the list are empty. If they are, I want to disable al ...

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

Steps to resolve Angular NX project NG0203 issue

Facing the challenge of dealing with the NG0203 error, all while my colleagues are effortlessly working on the project without any issues. Despite attempting to update and revert back the versions of Angular and Nx, the problem persists. I even went as far ...

When running either the "ng serve" or "npm start" command, the browser does not open automatically as expected

After successfully generating a project using angular-cli following the installation steps, my project is currently running. However, I find it tedious that I have to manually open the browser and type http://localhost:4200/ to view the project. Is there ...

The type '{}' is lacking the 'submitAction' property, which is necessary according to its type requirements

I'm currently diving into the world of redux forms and typescript, but I've encountered an intriguing error that's been challenging for me to resolve. The specific error message reads as follows: Property 'submitAction' is missing ...

Implementing redux-state-sync middleware in Angular-Redux for seamless state synchronization

I have some pre-existing code in AppModule where I originally set up the store: export class AppModule { constructor(ngRedux: NgRedux<IApplicationState>) { // Configuring the store in the constructor ngRedux.configureStore(rootReducer, INITI ...

Encountering type errors in React+Typescript while dynamically setting values in the change handler

I am currently working on dynamically generating a form based on an array of objects. The objective is to allow users to create accounts dynamically by clicking the Add User button and then submit the complete state object of users to the backend. Encoun ...

Connect the values of Angular form input fields to a Cloud Firestore database

Currently, I am utilizing Angular and the Firebase backend service. As part of this setup, cloud firestore functionality has been successfully implemented. However, an issue has arisen where the values retrieved from the database are not being reflected in ...

Customize time formatting in Angular to accommodate localized time formats

I am utilizing Angular's localization service version 8.3.28 to support English, Spanish (Mexico) with code es-MX, and Spanish (Spain) with code es-SP While using the date pipe: {{ foo.Date | date: 'shortDate' }} The dates are changing to ...

Any URLs that are requested through HTTP on the server must be for absolute server rendering

I've encountered an error while working on Angular 4 CLI + Universal, and I need help resolving it. I recall that it should work with relative paths, but I'm unsure how to achieve this. ERROR Error: URLs requested via Http on the server must b ...

Steps for resolving the error message: "An appropriate loader is required to handle this file type, but there are no loaders currently configured to process it."

I am encountering an issue when working with next.js and trying to export a type in a file called index.ts within a third-party package. Module parse failed: Unexpected token (23:7) You may need an appropriate loader to handle this file type, current ...

Rxjs: accessing the most recent value emitted by an observable

As shown in the demo and indicated by the title const { combineLatest, interval, of } = rxjs; const { first, last, sample, take, withLatestFrom } = rxjs.operators; const numbers = interval(1000); const takeFourNumbers = numbers.pipe(take(4)); takeFourNu ...

What is the solution for addressing the deprecation warning "The 'importsNotUsedAsValues' flag will no longer work in TypeScript 5.5"?

Is anyone familiar with how to resolve this tsconfig error? The flag 'importsNotUsedAsValues' is outdated and will no longer work in TypeScript 5.5. To address this error, use 'ignoreDeprecations: "5.0"' or switch to using & ...

Tips for customizing the scrollbar appearance in ngx-datatable

Currently, I am utilizing the ngx datatable within my Angular application and have come across an issue with customizing the scrollbar style specifically for this table. .ngx-datatable::-webkit-scrollbar-track{ border-radius: 8px !important; } Unfortu ...

Angular-cli allows importing custom classes just like importing Angular classes

I believe this question may have come up previously, but I'm not sure where to look for it. Please point me in the right direction if this is a duplicate. Within my angular-cli application, I've noticed that I can easily import classes from the ...

Error message in Angular states that it is not possible to bind to 'formGroup' because it is not recognized as a property of 'form' within Angular

When trying to extract data from a form using formcontrol, everything seems to be working fine except for the [formcontrol] = "userForm" in the HTML. If I remove this part, the project runs smoothly. I have tried multiple tutorials but none of them seem ...

Stop the inheritance of static components in a feature module by protecting the router-outlet

I am in the process of dividing my app into multiple feature modules. Currently, I am using only the router-outlet inside a component within a feature module. However, this approach brings along all the static components such as the navbar and footer. How ...

What is the process for classifying a nested object?

How can I specify a nested object? Click here for image description An error occurred: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ UA: {}; RU: {}; }'. No index ...