Angular - property value changes will not take effect until the output callback completes

Question

Angular - property value changes will not take effect until the output callback completes

When I have a component that needs to display a spinner during an operation, I came across an issue:

This is the HTML code snippet:

<spinner *ngIf='isLoading'></spinner>
<xx-table
  (onSort)='onSort()'>
</xx-table>

This is the TypeScript code of the component:

onSort(): void {
  this.isLoading = true;
  // The operation takes about 1 second
  this.isLoading = false;
}

Although I explicitly set this.isLoading to true, the change is not reflected in the template. It seems like the change detection is only triggered after the onSort() method finishes executing. If I remove the line this.isLoading = false;, the spinner shows up and remains there for approximately 1 second before disappearing.

How can I make sure this change is visible while the method is still running? And what exactly is the mechanism behind this behavior?

(I am aware that I can trigger change detection manually, but I'm curious why this change is not automatically detected.)

angular typescript

Answer 1

Answer №1

In the world of javascript, a block of code will tirelessly run until its mission is accomplished, following a single execution path diligently. It seems that your code operates synchronously without any asynchronous operations in sight, preventing angular from stepping in to update the page while isLoading holds true.

To overcome this hurdle, you have two options at your disposal. You can employ setTimeout to delay the execution of certain tasks by a specified number of milliseconds or immediately with '0' to allow the current execution path and pending events to be handled by the swift javascript runtime:

  embarkOnQuest(): void {
    this.isLoading = true  
    this.exploreMysteries() 
    this.isLoading = false 
  }
  
  embarkOnAsyncQuest(): void{
    this.isLoading = true
    setTimeout(() => { 
      this.exploreMysteries()
      this.isLoading = false
    }, 0)
  }

Answer 2

In the world of javascript, a block of code will tirelessly run until its mission is accomplished, following a single execution path diligently. It seems that your code operates synchronously without any asynchronous operations in sight, preventing angular from stepping in to update the page while isLoading holds true.

To overcome this hurdle, you have two options at your disposal. You can employ setTimeout to delay the execution of certain tasks by a specified number of milliseconds or immediately with '0' to allow the current execution path and pending events to be handled by the swift javascript runtime:

  embarkOnQuest(): void {
    this.isLoading = true  
    this.exploreMysteries() 
    this.isLoading = false 
  }
  
  embarkOnAsyncQuest(): void{
    this.isLoading = true
    setTimeout(() => { 
      this.exploreMysteries()
      this.isLoading = false
    }, 0)
  }

Answer 3

Answer №2

this.isDataLoading = false;

Make sure to place this line at the end of the promise or observable subscribe function. In your scenario, setting this.isDataLoading = true is immediately followed by setting it to false without waiting for the promise to finish.

// Function that takes around 1 second to complete

This is an asynchronous operation. Learn about handling promises and observables in JavaScript to grasp the concept better.

Answer 4

this.isDataLoading = false;

Make sure to place this line at the end of the promise or observable subscribe function. In your scenario, setting this.isDataLoading = true is immediately followed by setting it to false without waiting for the promise to finish.

// Function that takes around 1 second to complete

This is an asynchronous operation. Learn about handling promises and observables in JavaScript to grasp the concept better.

Angular - property value changes will not take effect until the output callback completes

Answer №1

Answer №2

Similar questions

What are the steps to break down a TypeScript interface and incorporate it into another interface?

Retrieving a string value from a child route in Angular 2

Encountering a 403 status code from the Spotify Web API while attempting to retrieve data using an OAuth 2.0 Token

Using useState to initialize a long value

How to target a particular Textfield in React with its unique identifier

When an empty array is returned from a catch statement in an async/await method, TypeScript infers it as never

PhantomJS and HTMLUnitDriver are experiencing difficulty locating elements using their id or xpath

Setting up the foundations in Angular 4

Running PHP scripts within an Angular2 CLI application

TS: A shared function for objects sharing a consistent structure but with varied potential values for a specific property

Make sure to wait for the observable to provide a value before proceeding with any operations involving the variable

What is the method for converting a string[] array to a record<string, boolean> format in typescript?

Using Ionic's ngmodel directive with a list and associating ids as keys

What is the best way to search for and sort through the data in this particular scenario?

Functionality not functioning within Shadow DOM

Tips for creating a Cypress command chain that includes parameters

Updating the JWT token in Angular 6 and making a new request with the updated token

Retrieve the Document ID from Firebase

Setting up Angular 2 for ASP.NET MVC: A Step-by-Step Guide

In order to showcase the data from the second JSON by using the unique identifier