Angular router navigate does not update url params for continuous request

Question

I am trying to update query params using router navigate

updateURL(queryParams){
        this.router.navigate(['path], {
            relativeTo: this.route,
            queryParams: queryParams,
            queryParamsHandling: 'merge',
            skipLocationChange: false
        });
}

/** Wont Work 
updateURL(queryParams);
updateURL(queryParams);
updateURL(queryParams);

/** Will Work
updateURL(queryParams);
// wait
updateURL(queryParams);
// wait
updateURL(queryParams)

When sequential calls are made to this method to update URL query params, angular does not update url. How it can be handled so that angular updates url even when sequential calls are made

Answer 1

from docs it is promise you will have to wait to fire next update

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

Can you try this

async updateURL(queryParams){
       await this.router.navigate(['path], {
            relativeTo: this.route,
            queryParams: queryParams,
            queryParamsHandling: 'merge',
            skipLocationChange: false
        });
}

async UpdateQueryParam() {
 await updateURL(queryParams);
  await updateURL(queryParams);
  await updateURL(queryParams)
}