title: How to encode query params containing special characters in Angular 7?
body: <p>I am trying to encode query parameter values in Angular 7. But I get 400 Bad Request status code, when my query parameter values contain any special character</p>
  
  <p>Failed Request URL:
  <a href="http://localhost/api/67/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE%20AGE" rel="noreferrer">http://localhost/api/67/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE%20AGE</a></p>
  
  <p>However, I get 200 OK status code , when my query parameter values do not contain any special characters.</p>
  
  <p>Successful Request URL:
  <a href="http://localhost/api/67/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE" rel="noreferrer">http://localhost/api/67/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE</a></p>
  
  <p>The expected request url has to be like 
  <a href="http://localhost/cardvalues?parentcardvalues=VALUE1&amp;parentcardvalues=VALUE2" rel="noreferrer">http://localhost/cardvalues?parentcardvalues=VALUE1&amp;parentcardvalues=VALUE2</a></p>
  
  <p>Below is my code,</p>
  
  <pre><code>parentcardvalues=["STONE","STONE AGE"]
  
  let myparams = new HttpParams();
  
      if(parentcardvalues.length != 0)
         parentcardvalues.forEach((value) =&gt; { 
  
  myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );
  
  });
  
   this.http.get(this.baseUrl + 'api/67/cardvalues', {params: myparams});
  </code></pre>
  
  <p>The Swagger specification is,</p>
  
  <p>Curl</p>
  
  <pre><code>curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE%20AGE" -H  "accept: application/json"
  </code></pre>
  
  <p>Request URL</p>
  
  <pre><code>http://localhost/api/cardvalues?parentcardvalues=STONE&amp;parentcardvalues=STONE%20AGE
  </code></pre>