Updating Angular 5 Views Dynamically Using a While Loop

Question

Updating Angular 5 Views Dynamically Using a While Loop

I am facing an issue in my app where I have a progress bar that updates using a while loop. The problem is that the view only updates after the entire while loop has finished running, even though I am successfully changing the update progress value with each iteration. Is there any way to force the view to update on each loop, maybe by adding something like "ForceViewUpdate()" within the while loop?

To see an example of this issue and view the values being updated, you can check out my code here and open the console: https://stackblitz.com/edit/angular-5zlja4?file=app%2Fapp.component.ts

javascript angular typescript

Answer 1

Answer №1

Blocking the entire JavaScript thread with your waiting method can cause issues. JavaScript operates on a single thread, so if you use a while loop to block that thread, no other code, including UI updates, will be able to run. Instead of blocking the thread, consider using setTimeout to execute code after a certain time delay. Another option is to utilize async/await and Promises for a more organized and sequential approach:

export class AppComponent  {
    sStatus = "Inactive";
    iProgressMax = 100;
    iProgressValue = 0;

  async Run() {
    this.sStatus = "Running...";
    while (this.iProgressValue < this.iProgressMax) {
      await this.wait(1000);
      this.iProgressValue = this.iProgressValue + 20;
      console.log(this.iProgressValue);
    }
    this.sStatus = "Complete";
  }

  wait(ms: number)  {
    return new Promise((resolve)=> {
      setTimeout(resolve, ms);
    });
  }
}

Answer 2

Blocking the entire JavaScript thread with your waiting method can cause issues. JavaScript operates on a single thread, so if you use a while loop to block that thread, no other code, including UI updates, will be able to run. Instead of blocking the thread, consider using setTimeout to execute code after a certain time delay. Another option is to utilize async/await and Promises for a more organized and sequential approach:

export class AppComponent  {
    sStatus = "Inactive";
    iProgressMax = 100;
    iProgressValue = 0;

  async Run() {
    this.sStatus = "Running...";
    while (this.iProgressValue < this.iProgressMax) {
      await this.wait(1000);
      this.iProgressValue = this.iProgressValue + 20;
      console.log(this.iProgressValue);
    }
    this.sStatus = "Complete";
  }

  wait(ms: number)  {
    return new Promise((resolve)=> {
      setTimeout(resolve, ms);
    });
  }
}

Updating Angular 5 Views Dynamically Using a While Loop

Answer №1

Similar questions

The tools needed for securing a web application with ExpressJS include the use of

In TypeScript and React, what is the appropriate type to retrieve the ID of a div when clicked?

Issue: The component factory for GoogleCardLayout2 cannot be located

Error encountered: Class not found exception in the context of JSONArray

Challenges when building a production version of an Expo app with Typescript

What is the process for bringing my API function into a different Typescript file?

Unlocking the Power of VueJS Mixins in an External JS Library

Saving the compiled Angular dist folder in the artifactory repository

Dreamweaver restricts my ability to utilize JavaScript for coding

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

Creating a menu header similar to Gmail's design is a great way to

Is Angular9 BehaviorSubject from rxjs giving trouble across different components?

Unable to retrieve data. Issue: Unable to send headers after they have already been sent to the client

Eliminate unnecessary transparency in React Material UI Tooltip / Popper by adjusting opacity restrictions

Connecting Node.js and Express with MySQL database

Angular Bootstrap Modal provides a sleek overlay for user input forms

How do I define two mutations in a single component using TypeScript and react-apollo?

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Vue.js is limited in its ability to efficiently partition code into easily loadable modules

Discovering the IMEI number with Ionic4 and Angular