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 = "test@test.com";

  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.

Answer 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 = "test@test.com";

  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>

Answer 2

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 = "test@test.com";
  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 = "test@test.com";

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

Answer 3

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 = "test@test.com";

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