Await Observable to complete in Angular

Background

I’ve encountered an instance where I was using ‘ag-grid’ with Angular and I needed to have the headers translated. However, to retrieve the translations using ‘ngx-translate’, we get an ‘Observable’ returned. If we subscribe to a successful result in the constructor, it will simply continue executing the rest of the code and initialize the user interface. After which the translations are probably already set, and they cannot be changed for some reason.

Solution

For this I decided to await the Observable in the constructor, but it was not easy to figure out because I’m fairly new to Angular. Anyways, you may want to look into using a ‘Promise’. Using ‘Promise’ as a return value in a method, you can use something similar to an ‘await’ in C# with more or less a lambda syntax.

constructor(public translateSvc: TranslateService) {
  let headerKeys: string[] = [
    'EMPLOYEE',
    'DATE',
    'CONTRACT',
    'REQUESTED_BY',
    'DURATION',
    'APPROVED',
    'STATE'
  ];

  this.getTranslations(headerKeys).then(success => {
    this.colDefs = [
      {
        headerName: '#',
        ...
      },
      {
        headerName: success['EMPLOYEE'],
        ...
      },
      {
        headerName: success['DATE'],
        ...
      },
      {
        headerName: success['CONTRACT'],
        ...
      },
      {
        headerName: success['REQUESTED_BY'],
        ...
      },
      {
        headerName: success['DURATION'],
        ...
      },
      {
        headerName: success['APPROVED'],
        field: 'approvalMinutes',
        filter: 'number',
        minWidth: 100,
        width: 100
      },
      {
        headerName: success['STATE'],
        ...
      },
      {
        headerName: '',
        ...
      }
    ];
  });
}

private getTranslations(keys: string[]): Promise<any> {
  return new Promise((resolve, reject) => {
    this.translateSvc.get(keys).subscribe(success => {
      resolve(success);
    });
  });
}

The above code should be fairly easy to understand. I’m retrieving the translations from ‘TranslationService’ which we inject in the constructor with dependency injection. Check this documentation for details on ‘ngx-translate‘. The method ‘get’ returns a ‘Observable<string[]>’ in the example above. However, even if we write the value in the subscribe method to the column definitions. the code will continue to run, and the translations will already be set.

We define ‘resolve’ and ‘reject’ as method names. We will only use ‘resolve’ here to keep it fairly easy. Then in the lambda code (last block), write resolve as a method and pass the returned value from the Observable’s subscribe method.

Then in the constructor, append ‘.then(… do stuff …)’ to the ‘getTranslations($keys)’ method wait for the Promise to return a value and do your things.

I prefer this way of waiting for an Observable, because using ‘complete’ from the rxjs/Observable doesn’t feel clean. If you have a better suggestion, please do let me know in the comments! Thank you!