Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file.

The Challenge: The user interface becomes unresponsive until the entire operation is completed

To address this problem, I attempted to use setTimeout to divide the loading process and called it recursively. Additionally, I experimented with ngZone.run(), applicationRef.tick(), and changeDetectorRef.markForCheck(), but none of these solutions were successful as the progress bar only shows full at the very end of the operation.

I have created a simplified stackblitz example to seek guidance on how to implement this functionality correctly. While in my actual code, I have implemented it within a service where the results are obtained through an observable. However, if this basic version works, it will help me identify what mistakes I may be making. https://stackblitz.com/edit/angular-gzdylf

javascriptangulartypescriptsettimeoutangular-changedetection

Answer №1

For instance, in the scenario where you utilize setTimeout to segment the tasks you are performing this:

setTimeout(work());

This signifies that you are executing the work function within the loop rather than scheduling it for later execution.

To achieve the desired outcome, you must modify it to pass the function reference to setTimeout:

setTimeout(work);   // REMARK: `work` instead of `work()`

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

Creating a personalized event using typescript

I need help with properly defining the schema for an EventObject, specifically what should be included within the "extendedProps" key. Currently, my schema looks like this: interface ICustomExtendedProps { privateNote?: string; publicNote?: string; ...

reactjstypescriptfullcalendar

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

javascriptfirebasevue.jsgoogle-cloud-platformgoogle-cloud-firestore

Intellij IDEA does not offer auto-completion for TypeScript .d.ts definitions when a function with a callback parameter is used

I've been working on setting up .d.ts definitions for a JavaScript project in order to enable auto-completion in Intellij IDEA. Here is an example of the JavaScript code I'm currently defining: var testObj = { tests: function (it) { ...

javascripttypescriptintellij-ideajsdoc

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

phpjavascript

What is the process for excluding a file from running in jest?

Currently, I am working on integration tests using Jest and I have a folder with 20 test files. However, there are three specific files in that folder that should not be executed during the testing process. I tried using testPathIgnorePatterns, but it seem ...

javascriptnode.jsjestjsjasmine

Utilizing Fullcalendar Qtip to display information on mouseover rather than utilizing the eventRender

I have a challenge with integrating Qtip to the eventMousever event instead of the eventRender event in fullcalendar. The main reason for this adjustment is due to the server hosting the data being located in another country, resulting in significant late ...

javascriptjqueryajaxfullcalendarqtip2

Language setting required for dijit.form.DateTextBox

I am attempting to create a calendar control dynamically using Dojo 1.5 and set the language to Spanish, but so far I have been unsuccessful. I tried using "lang:es-es" among other things with no success... here is the element: <input type="text" const ...

javascriptdojo

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

javascripthtmlnode.jsexpress

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window

We have been struggling to showcase a Word document (.docx) within an iframe on our website using the Office 365 service. The document is stored in One-Drive for business online and has been appropriately shared. After signing in, we obtained a link to the ...

javascripthtmlasp.net-mvciframeoffice365

Combining multiple template filters in ng-table with the power of CoffeeScript

Combining AngularJS, ng-table, and coffeescript has been quite a task for me. I've been trying to create a multiple template filter within coffeescript and pass it into my angularjs template. One of the challenges I'm facing is with a combined & ...

javascriptangularjscoffeescriptngtable

Handling exceptions in Node.js is an essential part of writing reliable

Just a quick question: I seem to be dealing with an incorrect endpoint, and every time I run the code below, it results in an exception being thrown client.post("http://WrongEndPoint", [], function (data, response) { console.log("data:", data, "respo ...

javascriptnode.jsexception

How does the Cluster module in Node.js compare to the Cluster module in Learnboost?

Node.js features its own Cluster core module (source: http://nodejs.org/docs/v0.8.3/api/cluster.html) while Learnboost has introduced a similarly named Cluster module as well (source: , https://github.com/LearnBoost/cluster). What are the differences betw ...

javascriptnode.jscluster-computingnpm

Navigating through nested JSON Objects for dropdown functionality in Angular 6 - a step-by-step guide

Currently, I am facing a challenge in Angular 6.0 where I am trying to use HttpClient to iterate through JSON data retrieved from a local file within my assets folder. Below is the sample JSON Data: [{ "configKey": [{ "user1": [{ ...

jsonangulartypescriptnested

Create a dropdown menu using a PDO query to populate the selectable options

I need to create a Select List that dynamically populates items/information from a Query. I understand the importance of updating the select list every time the database is updated, so JQuery is required for this task. Although I have limited experience wi ...

javascriptphpjqueryjsonpdo

Using R plotly to show an image when hovering over a location on a map

After successfully implementing the technique of displaying an image on hover in a regular R plotly chart, I encountered issues when trying to apply the same method to a plotly map. Specifically, the approach broke down and failed to display the image. Can ...

javascriptrplotlyinteractive

React Issue: Make sure to assign a unique "key" prop to each child element within a mapped list

I encountered the error message below: react Each child in a list should have a unique "key" prop. Here is my parent component code snippet: {data.products .slice(4, 9) .map( ({ onSale, ...

javascriptreactjsarraysmapping

Differences between React class properties and ES6 class properties

With React 16.2, defining class properties is done differently with the tagLine example shown below: class Header extends React.Component { tagLine = "Super Hero"; render() { .... } } Contrastingly, in ES6 classes, it's not possible to define ...

javascriptreactjs

Display various components using a dropdown selection

I am seeking guidance on how to display different components based on the selected option. I am unsure of how to write the code for displaying either component one or two. Can you provide any examples or references that may help? <template> <div ...

javascriptvue.jsselectvuejs2vue-component

Utilizing SVG elements for interactive tooltips

Can the < use > element show the rect tooltip on mouseover in modern browsers? Refer to 15.2.1 The hint element. <svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol i ...

javascriptcsssvgtooltip

Confirming an authorization?

I have been working on this code and it is almost perfect, but I am struggling to understand why it needs to validate the 0 or 10 in order to work correctly. The issue I am facing is with a validation where the button should be deactivated when the counte ...

javascripthtml