title: How to wait a return method until service response completes in Angular?
body: <p>I am calling a API service and assigning API response to any[] type.</p>
  
  <p>Problem is method was execution was completed without waiting API response completes?</p>
  
  <p>Below is my code</p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>  this.catalogService.getCatalogsData().subscribe((data =&gt; {
       this._catalogData=data;
        console.log("catalogService function execution done!");
     })); 
  </code></pre>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>public responseData:any=[];
  
   constructor(private http: HttpClient) { 
        }
      public getCatalogsData(){
  
        debugger;
  
             this.http.get(this.APIUrl}}).toPromise().then(  
                  data =&gt; {  
                        this.responseData = data as string [];  
                        console.log("API Response completed");
                    }  
                ); 
  
         return this.responseData;
        }
  
  Logs Output: -
  catalogService function execution done!
  API Response completed
  
  Expected OutPut:-
  API Response completed
  catalogService function execution done!
  </code></pre>