title: Handling multiple query parameters in Angular
body: <p>I'm using Angular Material Tabs and I want to save selected tab in URL using query parameters (I only have 2 tabs).
  Also, when I'm on tab 1 I must have 2 query parameters, one for selected tab and a new one for another selected value (inspectionChecklistId).
  My problem is that when I'm on second tab and I try to update the existing parameter (selectedTab) and in the same time to add the new one (inspectionChecklistId) because the first one is not updated.
  I have to mention that I'm using a method to update the query paramters.</p>
  
  <p>I'm using this method to update a query parameter:</p>
  
  <pre><code>updateQueryParams(name: string, value: number){
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: {
        [name]: value
      },
      queryParamsHandling: "merge"
   });
  }
  </code></pre>
  
  <p>And I tried to update query parameters like that:
  In constructor I called the method only once with the selected tab parameter:</p>
  
  <pre><code>constructor(private router: Router, private activatedRoute: ActivatedRouter) {
     this.updateQueryParams('selectedTab', 0);
  }
  </code></pre>
  
  <p>In the method that's called each time when the tab is changed I did something like this:</p>
  
  <pre><code>onSelectedIndexChanged(index: number){
    this.updateQueryParams('selectedTab', index);
  
    if(index === 1) {
      this.updateQueryParams('inspectionChecklistId', -1);
    } else {
      this.updateQueryParams('inspectionChecklistId', null);
    }
  }
  </code></pre>
  
  <p>I also tried to change the updateQueryParams like this:</p>
  
  <pre><code>updateQueryParams(...queryParams) {
      this.router.navigate([], {
        relativeTo: this.activatedRoute,
        queryParams: {
          ...queryParams
        },
        queryParamsHandling: "merge"
      });
  }
  </code></pre>
  
  <p>and using the method like this:</p>
  
  <pre><code>  onSelectedIndexChanged(index: number) {
      if (index === 1) {
        this.updateQueryParams(
          { name: "selectedTab", value: index },
          { name: "inspectionChecklistId", value: -1 }
        );
      } else {
        this.updateQueryParams({ name: "inspectionChecklistId", value: null });
      }
    }
  </code></pre>
  
  <p>but using spread type, is wrong to add the entire array of queryParams like I did and I don't know how to add each element separately.</p>
  
  <p>So that's what I want to have:</p>
  
  <pre><code>-tab 0 is selected (the first one) =&gt; localhost:4200/?selectedTab=0
  -tab 1 is selected (the second one) =&gt; localhost:4200/?selectedTab=1&amp;inspectionChecklistId=-1
  </code></pre>
  
  <p>But now, the selectedTab is not changing.</p>