title: programmatically appending query params to route if queryparam is used
body: <p>I am prepared to spend the day researching this, but I hope you guys have answer as I think otherwise this would be an all day thing.</p>
  
  <p>I have the following variables </p>
  
  <pre><code>  inputCity;
    inputGuestNumber;
    inputCapacitySelected;
    inputCuisineSelected;
    inputPrivacySelected;
    inputVenueTypeSelected;
    inputAmenitiesSelected;
    inputNeighborhoodSelected;
  </code></pre>
  
  <p>these variables may or may not be populated or defined depending on what information a user enters into a form. </p>
  
  <p>I have the current router set up:</p>
  
  <pre><code>onSubmit(){
      this.router.navigate(['/venue-list',
      this.inputCity], {queryParams:{guestCount: this.inputGuestNumber, countOption: this.inputCapacitySelected,
      cuisineSelected:this.inputCuisineSelected, privacySelected:this.inputPrivacySelected,
        venueTypeSelected: this.inputVenueTypeSelected, amenitiesSelected: this.inputAmenitiesSelected,
      neighborhoodSelected: this.inputNeighborhoodSelected}
  
    });
  </code></pre>
  
  <p>I set it up this way hoping that if a <code>queryparam</code> was undefinded it would be ignored, instead all the queryparams are appended.</p>
  
  <p>So now I am hoping to append the query params to the queryparams argument, if the query param is used. I have no idea how to do this and have started my research. </p>
  
  <p>default values are not acceptable as it would still produce a gross url. Thank you all very much</p>