title: How to append URL queryParams programmatically in angular
body: <p>I want to append the URL queryParams in the browser URL dynamically.
  I have a dynamic menu where I can't add any params or function there, just I want global function it will observe the navigation change &amp; it should append the query params in the browser URL.</p>
  <p>This is not working.
  <strong>RouterResolver before activate the URL I need to add some queryParam in the URL</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Resolve, Router, RouterStateSnapshot } from '@angular/router';
  import { BehaviorSubject, Observable } from 'rxjs';
  
  @Injectable({
      providedIn: 'root'
  })
  export class RouteingQueryParamsResolver implements Resolve&lt;Observable&lt;any&gt;&gt; {
      constructor(private qp: ShareDataService, private router: Router) {
  
      }
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
  
          const qp = { ...this.qp.getQuery(), ...route.queryParams };
          let urlQuery = '';
          for (var key in qp) {
              if (urlQuery != '') {
                  urlQuery += '&amp;';
              }
              urlQuery += key + '=' + encodeURIComponent(qp[key]);
          }
          
          route.queryParams = {urlQuery};
      }
  }
  </code></pre>
  <p><strong>Shared funtions to append the queryParams</strong></p>
  <pre><code>  @Injectable({
          providedIn: 'root'
      })
      export class ShareDataService {
          constructor(private router: Router) {
      
          }
          private content = new BehaviorSubject&lt;any&gt;([]);
          setQuery(v) {
              this.content.next(v);
          }
      
          getQuery(): Observable&lt;any&gt; {
              return this.content.value;
          }
      
          passQuery(qp: {}) {
              this.router.events.subscribe((event) =&gt; {
                  if (event instanceof NavigationStart) {
                      this.setQuery(qp);
                  }
              });
          }
  }
  </code></pre>