Run method after another has been finished in component initialization Angular

Question

In my component initialization method I want to run addCutomLayers() method after initMap() has been finished.

I tried the code below in my ngOnInit() but for some reason in my browser debugger I can see that the initMap() is still running simultaneously with the addCustomLayer()

this.initMap().then(res => {
    if (this.selectedCustomLayers) {
        this.customLayerService.addCustomLayers()
                .takeUntil(this.destroy$)
                .subscribe(result => {
            })
    }
});    

//this method is in customLayerService service
public addCustomLayers(): Observable<any> {
  //some Code
}

private initMap() {
  return new Promise((resolve, reject) => {
    //some code
    resolve()
  });
}

Answer 1

Maybe try converting the promise to rxjs observable first. This'll also make it easier to add some logging to see if the initMap is returning a value/marble when you expect it. You can then also look at using a switchMap (or mergeMap if that's preferred) and using filter instead of the if statement. Although for the filter it would be cleaner to use a value from the initMap return values if that's applicable.

import { from } from 'rxjs';
import { filter, switchMap, takeUntil, tap } from 'rxjs/operators';

from(this.initMap()).pipe(
    tap(res => console.log('init map tick')),
    filter(_ => this.selectedCustomLayers),
    switchMap(r => this.customLayerService.addCustomLayers().pipe(takeUntil(this.destroy$)))
).subscribe(res => { };