To ensure the next line only runs after the line above has finished executing, remember that the function is invoked in HTML

Question

To ensure the next line only runs after the line above has finished executing, remember that the function is invoked in HTML

my.component.html

    <button (click)="refresh()">Refresh</button>

my.component.ts

    refresh() {
        let self = this;
        self.isRefresh = true; //1st time
        self.getfun().then(() => {
            self.isRefresh = false; 
        });
    }

I am seeking a professional way to ensure that self.isRefresh = false; is only executed after self.getfun(); has completed its execution entirely.

Please advise on the best practice for handling this scenario in an Angular asynchronous environment without modifying getfun().

javascript angular typescript callback

Answer 1

Answer №1

For those utilizing Observables, take a look at this code snippet below:

fetchData(){
    return new Observable((observer)=> {
      //Fetch data method logic here
      observer.complete()
    })
  }

  reload() {
    let self = this;
    self.isReloading = true; //First time
    this.fetchData().subscribe({ complete: () => {
       self.isReloading = false; //Second time
    }});
  }

Answer 2

For those utilizing Observables, take a look at this code snippet below:

fetchData(){
    return new Observable((observer)=> {
      //Fetch data method logic here
      observer.complete()
    })
  }

  reload() {
    let self = this;
    self.isReloading = true; //First time
    this.fetchData().subscribe({ complete: () => {
       self.isReloading = false; //Second time
    }});
  }

To ensure the next line only runs after the line above has finished executing, remember that the function is invoked in HTML

Answer №1

Similar questions

Click outside of this popup to dismiss it

Mobile viewing causing problems with website buttons functionality

Adjusting diagram size based on screen width using Bootstrap and jQuery

Ensure that at least one checkbox is selected by using custom validation in jQuery

Failed attempt to install Angular Material

The JSON output is not displaying correctly

Revisiting Dynamic URL Parameters with React Router and Express

Collaborating on data through module federation

Utilize Google Maps to receive directions to a specific destination and discover current traffic conditions along the route using their comprehensive API

Adjusting the width of a select box to match the size of its child table using CSS

Leveraging Ignorable Fields in Angular 2 Reactive Forms

I am exploring directories on my server but encountered a restriction while using $.ajax

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

What is the best way to eliminate duplicate data from an HTTP response before presenting it on the client side?

Prevent user input with Angular ng-pick-datetime when a specific condition is met

Are reflection problems a concern when using type-graphql mutations?

Transmit form data via Ajax request

Managing tabular data in reactive forms in Angular

The dependencies of Nest are unable to be resolved by the system

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver