title: How to Update queryParams in URL without reload page in angular 6
body: <p>I have Angular6 project. It has listing component and detail component. In listing component, I have a search box. When I search anything and based on that when redirecting to the detail page, I am assigning queryParams and when coming back I am preserving those queryParams. And it is working fine.</p>
  
  <p>But again when I type anything in the search box, I want to update the URL with the updated search string that I have entered in the search box without reloading the page again, i.e... I want to keep the queryParams updated while changing the search-box input field. </p>
  
  <blockquote>
    <p>listing.component.html</p>
  </blockquote>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="input-group"&gt;
      &lt;input type="text" name="search" [(ngModel)]="search"&gt;
  &lt;/div&gt;
  &lt;div class="row" *ngFor="let List of Lists | searchFilter:search:'name' | paginate: { itemsPerPage: 25, currentPage: page }"&gt;
      &lt;div (click)="editList(List.ListId)"&gt;{{List.name}}&lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>listing.component.ts</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit(): void {
      this.search = this.activatedRoute.snapshot.queryParams['search'] || '';
  }
  
  editPrice(ListId: number): void {
      this.router.navigate(['lists/edit', ListId], { queryParams:
          { search: this.search }
      });
  }
  </code></pre>
  
  <blockquote>
    <p>detail.component.html</p>
  </blockquote>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]="['/lists']" queryParamsHandling="preserve"&gt;Go Back&lt;/a&gt;
  </code></pre>