Observable in a callback function - angular 5

Question

I am trying to execute a callback in which only after getting the response it should execute the lines, starting from this.groupDefaultExpanded = -1; after that.

 loadLoginDetails() {
    this.derivativeSpecService.getDerivativeDetails().subscribe(
        res => {
            this.rowData = res;
            this.groupDefaultExpanded = -1;
            this.getDataPath = function(data) {
              return data.orgHierarchy;
            };
              this.autoGroupColumnDef = {
              headerName: "Name",
            };

            console.log(this.rowData);
        })
      }

derivativespec.ts

 getDerivativeDetails(){

        return this.http.get('assets/derivativespec.json').map((response: Response) => response);
    }

Answer 1

Like this:

getDerivativeDetails(): Promise<Response> {
    return this.http.get<Response>('assets/derivativespec.json').toPromise();
}

And then:

loadLoginDetails() {
    this.derivativeSpecService.getDerivativeDetails().then(
        res => {
            this.rowData = res;
            this.groupDefaultExpanded = -1;
            this.getDataPath = function(data) {
              return data.orgHierarchy;
            };
            this.autoGroupColumnDef = {
              headerName: "Name",
            };

            console.log(this.rowData);
    });
}