Update query without refreshing page in Angular

To update the query without refreshing the page,  we tell the router object to do an empty route navigation:

this.router.navigate(
      [], 
      {
        relativeTo: this.route,
        queryParams: { query :  "somedata" }, 
        queryParamsHandling: 'merge', 
        // remove to replace all query params by provided
      });

To read the query, we add this to the OnInit:

this.route.queryParams.subscribe({
      next: (params: Params) => {
        if (params["query"]) {
          this.someData= params["query"];
          this.loadData(true);
        }
      }
    })