What is the best way to determine if several simultaneous tasks have been completed?

Implementing multiple parallel actions in an Angular component has proven to be challenging for me. Following each action (foo), I subscribe to its result.

I've been attempting to determine if any actions are currently running or have completed using a variable called "lock".

for (let a of myary)
{
    this.lock ++;
    this.foo (a).subscribe (resp =>
    {
        this.lock --;
    }
}

A spinner/hourglass should display while any actions are still in progress.

<spinner *ngIf="lock > 0"></spinner>

However, it seems that the "lock" variable is not being utilized as expected. It appears to be insecure for this type of access. How can I effectively handle this situation in Typescript/Angular?

angulartypescript

Answer №1

Utilize the RxJS operator forkJoin to simultaneously execute multiple calls

this.lock=myary.length
forkJoin(myary.map(a=>this.foo(a)))
    .subscribe((res:any[])=>{
       in res[0] you will find the response to this.foo(myary[0])
       in res[1] you will find the response to this.foo(myary[1])
       ....
       this.lock=0
    })

If you wish to display a series of "steps" every time one foo is completed, you can use the tap operator to decrement this.lock upon completion

this.lock=myary.length
forkJoin(myary.map(a=>this.foo(a).pipe(
       tap(_=>this.lock--)
     )))
    .subscribe((res:any[])=>{
       in res[0] you have the response to this.foo(myary[0])
       in res[1] you have the response to this.foo(myary[1])
       ....
    })

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

One-Of-A-Kind Typescript Singleton Featuring the Execute Method

Is it feasible to create a singleton or regular instance that requires calling a specific method? For instance: logger.instance().setup({ logs: true }); OR new logger(); logger.setup({ logs: true }); If attempting to call the logger without chaining the ...

javascriptnode.jstypescriptexpressoop

Angular 8 HTTP Interceptor causing issues with subscriptions

I'm currently in the process of setting up an Angular 8 project that will allow me to mock API calls using HTTP INTERCEPTORS. My approach involves adding a --configuration=mock flag to my ng serve script so that the interceptor is injected into my app ...

angulartypescriptrxjs

Error: The script cannot be compiled with the '--isolatedModules' flag as it is recognized as a global script file

Currently, I am working on building my NextJS app and incorporating Cypress for testing along with Typescript. During this process, I encountered the following error: Type error: 'home.cy.ts' cannot be compiled under '--isolatedModules' ...

typescriptnext.jscypress

Error in Angular: Trying to access property 'setLng' of a null component variable

Just starting out with Angular and I've come across the error message Cannot read property 'setLng' of null. Can anyone help explain why this is happening? import { Component, OnInit, Input } from '@angular/core'; @Component({ ...

javascriptangular

Utilizing the NPM package as a JSX Component is prohibited due to type errors

I've been encountering some unusual type errors in my TypeScript project with certain packages. For example: 'TimeAgo' cannot be used as a JSX component. Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{} ...

typescriptnpmtypescript-typings

Incorporating yarn into your Vue3 project with Typescript

I'm attempting to implement a solution from https://yarnpkg.com/package/vue-disable-autocomplete that disables autocomplete in my Vue3 project. After running yarn add vue-disable-autocomplete, I included the following code: import DisableAutocomplete ...

typescriptautocompletevuejs3

Creating a React component with a column allowing multiple checkbox selections in NextUI table

Setting up multiple "checkbox" columns in a table using the NextUI table has been my current challenge. Each row should have selectable checkboxes, and I want these selections to be remembered when navigating between pages, running searches, or removing co ...

javascriptreactjstypescriptnextui

Prevent touching the pseudo content of an element

My issue involves a toggle button component where I have utilized the ::before pseudo class to add text. The problem arises when clicking on the text within the toggle button causes the button's state to change. How can this be prevented? Here is the ...

htmlcssangularionic2

Having trouble getting a basic file upload to work in Angular2+? Wondering what the easiest method is to make it function properly? Look no

I successfully created a MEAN stack CRUD board using Angular 2+, Node.js, Express, and MongoDB. However, I encountered an issue when trying to add an upload function. The error message displayed was: compiler.js:486 Uncaught Error: Template parse errors: ...

node.jsangularmongodbexpress

Exploring the Differences Between Angular 2 Two-Way Data Binding and One-Way

My query pertains to the distinction between Angular 2's two-way and one-way data binding mechanisms. From my understanding, one-way data binding involves data flowing strictly from parent to child. However, this changes when the source of the binding ...

angularjsdata-bindingangular

Encountering a TS2739 error while retrieving data in an Angular service function

In my code, I have created a function to fetch objects from my dummy data and assign them to a variable. setData(key: string) { let dataChunk: ProductIndex = PRODUCTDATA.filter(a => {a.productId == key;}); this.ProductData = dataChunk; } The i ...

angulartypescript

What is the process for uploading an image with express-fileupload?

Looking to upload an image to Cloudinary via Postman using the express-fileupload library for handling multipart forms. Here is a snippet from my index.ts file: import fileUpload from "express-fileupload"; app.use(fileUpload()); In my controller ...

javascriptnode.jstypescriptexpressfile-upload

A guide on updating a MySQL table using a JSON object in Node.js

I have a JSON Object and need to UPDATE a mySQL table without listing all of the keys individually For an INSERT operation, I use the following code: var arrayValue = Object.keys(obj).map(function(key) { return String("'"+obj[key]+"'"); ...

javascriptmysqlnode.jstypescript

Fetching Form Data from Angular Service

My project structure consists of a FATHER component with a stepper, each step-page containing a CHILD component with a FORM. In one page, the CHILD component has another CHILD with yet another FORM. At the final step of the stepper, there is a SUBMIT butt ...

angularangular-reactive-forms

What is the best way to create an instance method in a subclass that can also call a different instance method?

In our programming project, we have a hierarchy of classes where some classes inherit from a base class. Our goal is to create an instance method that is strongly-typed in such a way that it only accepts the name of another instance method as input. We d ...

typescript

Crafting a dynamic HTML template in Angular using template literals and the *ngFor directive

I've been developing a toast component that accepts HTML tags as strings. This requires me to iterate through the errorMsgs array below and dynamically build a list. However, I'm currently facing an issue where the *ngFor loop inside it is iterat ...

angularecmascript-6

Error: Idle provider not found in the promise

Currently, I am integrating ng2-idle into an AngularJS 2 application. After successfully including the ng2-idle package in the node_modules directory of my project, I attempted to import it into one of my components as shown below: Dashboard.component.ts: ...

angulartypescript

Is it necessary to enforce a check for surplus properties in the return type of a function

In this particular scenario, the TypeScript compiler does not raise an error when a function returns an object with the type UserProfile even though the expected return type is UserProfileWithNoPermissions. Here's an example: interface UserProfile { ...

typescript

Ag-Grid filter not displaying

In my HTML file, I have the following code: <ag-grid-angular #agGrid style="height: 300px" [rowData]="rowData" [columnDefs]="columnDefs" [gridOptions]="gridOptions" ...

angularfilterag-grid

Instructions for including a class are ineffective

I am trying to dynamically add a class to a div based on two conditions. To achieve this, I have created a custom directive as shown below: import { Directive, HostBinding, Input } from '@angular/core'; @Directive({ selector: '[confirmdia ...

angulartypescriptangular-directive