How to wait until function executes completely in angular

Question

Hi i am trying to get user details in angular and based on user values i need to perform specific task, i am able to make the call to the api but response is taking some time and thats why i am unable to check the condition.

  ngOnInit() {

   this.getUserDetails();

  if(this.user.PrivacyNotice) //getting undefined here
  {

  }
  else
  {

  }
}

getUserDetails() {
  this.user.Email = "[email protected]";

  this.bookingListSubscription = 
  this.restService.getUserProfile(this.user).subscribe(
  data => {
   this.user = data;
  });
}

Here user is the object of type UserVM Model which contains PrivacyNotice boolean field

following is the service method which makes the api call

getUserProfile(user: UserVM): Observable<any> {
return this.http.post<UserVM>(this.getAPI('FetchUserProfile'),user,
 this.httpOptions).pipe(
map(data => data),
catchError(this.handleError<any>('getUserProfile'))
);
}

in if i want to check the value of boolean flag PrivacyNotice which is returned from api so how can i achive this.

Stefan · Accepted Answer · 2019-02-12 12:26:36Z

1

Usually, as long as you are in a loading state, you display a loading indicator:

Example:

loading = ture;
ngOnInit() {
 this.getUserDetails();
}


getUserDetails() {
  this.user.Email = "[email protected]";

  this.bookingListSubscription = 
  this.restService.getUserProfile(this.user).subscribe(
  data => {
   this.user = data;
   if((this.user.PrivacyNotice))
   {
   ------
   }
   else
   {
   ------
   }
   loading = false;
  });
}

and in your *.html

<div *ngIf="loading else #loaded">
  Loading...
</div>
<ng-template #loaded>
  The data is loaded, display them as you wish
</ng-template>

answered Feb 12, 2019 at 12:26

Stefan

15k17 gold badges92 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vishal Over a year ago

Thank You for the Answer Sir

SiddAjmera · Accepted Answer · 2019-02-12 12:25:27Z

You could use a map or a tap operator. Something like this:

import { tap } from 'rxjs/operators';

...    

ngOnInit() {

  this.getUserDetails()
    .subscribe((user) => {
      if ((this.user.PrivacyNotice))
      {
        -- -- --
      } else {
        -- -- --
      }    
    });
}

getUserDetails() {
  this.user.Email = "[email protected]";
  return this.restService.getUserProfile(this.user).pipe(
      tap(data => this.user = data)
    );
}

Or better, just get rid of the getUserDetails function in the first place as at this moment, it doesn't seem very useful:

ngOnInit() {

  this.user.Email = "[email protected]";

  this.restService.getUserProfile(this.user)
    .subscribe((user) => {
      if ((this.user.PrivacyNotice))
      {
        -- -- --
      } else {
        -- -- --
      }    
    });
}

Anil Kumar Reddy A · Accepted Answer · 2019-02-12 12:28:36Z

0

this can be done by using a boolean value. here I took completed as a boolean value. After the data gets assigned to user the boolean value now will be changed to true and you can use it as per your requirement whether it to show a spinner of call a method etc...

completed=false;
 ngOnInit() {

 this.getUserDetails();
 if(completed){

if((this.user.PrivacyNotice)) //getting undefined here
{
   ------
}
else
{
   ------
}
}
}

getUserDetails() {
  this.user.Email = "[email protected]";

  this.bookingListSubscription = 
  this.restService.getUserProfile(this.user).subscribe(
  data => {
   this.user = data;
   this.completed=true;
  });
}

answered Feb 12, 2019 at 12:28

Anil Kumar Reddy A

64813 silver badges33 bronze badges

1 Comment

Vishal Over a year ago

Thank You for the Answer Sir,I will try

Collectives™ on Stack Overflow

How to wait until function executes completely in angular

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related