How to wait for data in subscribe

I have a problem with this service in angular. When I want to get users' roles by token from backend and in method hasrole() check this role - I get undefined data. Because data roles don't exist yet. When I run this service a second time it works great. How to get data and tell service to wait for them.

export class JwtService {

  roles: string[] = [];
  
  constructor(
    private http: HttpClient,
    private loginService: LoginService
  ) { }

  hasRole(rolea: string): boolean {
    if (this.roles.length  === 0) {
      this.saveRole();
    }
    return this.roles.includes(rolea);
  }

  saveRole() {
    this.http.get<string[]>(`/api/getRole/${this.getToken()}`).subscribe(role => this.roles = role);
  }
}

Update replace the "switchMap" by "map"
Remember: "Your services return Observables, you subscribe in components."

You can re-structure your service in the way
<strike>

//see that return an observable
//You use rxjs operator "of"
hasRole(rolea: string): Observable<boolean> {
    if (this.roles.length  === 0) {
      return this.saveRole().pipe(
        //use switchMap, to return not the observable that return the roles
        //else an observable "true|false"
        switchMap((roles:string[])=>{
           this.roles=roles; //<--store the roles
           return of(this.roles.includes(roles))
        })
      )
    }
    else
      return of(this.roles.includes(roles))
  }

</strike>

//see that return an observable
//You use rxjs operator "of"
hasRole(rolea: string): Observable<boolean> {
    if (this.roles.length  === 0) {
      return this.saveRole().pipe(
        map((roles:string[])=>{
           this.roles=roles; //<--store the roles
           return this.roles.includes(roles)
        })
      )
    }
    else
      return of(this.roles.includes(roles))
  }


  //I imagine that your function getToken() also return an Observable
  saveRole():Observable<string[]> {
    return this.getToken().pipe(
        switchMap((token:string)=>
                    this.http.get<string[]>(`/api/getRole/${this.getToken()}`));
  }

So you can use some like

  <div *ngIf="myService.hasRole('admin')|async">
      I am admin
  </div>

The hasRole should return an Observable like this:

hasRole(role: string): Observable<boolean>{
    if (this.roles.length  === 0) {
      return this.saveRole().pipe(
                 map(roles => roles.includes(rolea))
             );
    }else{
      return of(this.roles.includes(rolea));
    }
    

saveRole(): Observable<string[]> {
    return this.http.get<string[]> 
           (`/api/getRole/${this.getToken()}`).pipe(
             tap(roles => this.roles = roles)
          );
  }

And then subscribe to it in your component:

JwtService.hasRole('someRole').subscribe(hasRole => this.hsRole = hasRole)

tap & map are both rxjs operators, tap is for side effects and map just maps the value into something else - in your case into a boolean.

of is a rxjs function that instantiate an Observable on go with the value you supply. In this case, we used it to return an Observable when no http request is needded since the data is already fetched.