title: Angular 5 URL routing with a button click and retain the querystring params in the url
body: <p>I have a URL which is like this</p>
  
  <p><a href="http://localhost:4200/cr/hearings?UserID=61644&amp;AppID=15&amp;AppGroupID=118&amp;SelectedCaseID=13585783&amp;SelectedRoleID=0" rel="nofollow noreferrer">http://localhost:4200/cr/hearings?UserID=61644&amp;AppID=15&amp;AppGroupID=118&amp;SelectedCaseID=13585783&amp;SelectedRoleID=0</a></p>
  
  <p>The router module knows to display based on this </p>
  
  <pre><code>{ path: 'criminal/hearings', component: HearingsComponent, pathMatch: 'full'},
  </code></pre>
  
  <p>but now I have a button click in which I want to maintain the querystring.</p>
  
  <p>button html  </p>
  
  <pre><code>&lt;button type="button" (click)="addHearing()" class="btn btn-primary"&gt;Add Hearing&lt;/button&gt;
  </code></pre>
  
  <p>typescript function</p>
  
  <pre><code>addHearing(){
      this.router.navigate(['/cr/edithearings']) // how to include the querystring???
  }
  </code></pre>
  
  <p><strong>I want to add the existing querystring to above button click event 
  then in the route module it goes to proper route, along with the querystring</strong></p>
  
  <pre><code>{ path: 'criminal/edithearings', component: HearingEditComponent, pathMatch: 'full'},
  </code></pre>
  
  <p><a href="http://localhost:4200/criminal/edithearings?HOW_to_add" rel="nofollow noreferrer">http://localhost:4200/criminal/edithearings?HOW_to_add</a>?</p>