title: Angular4: HttpClient and HttpParams: passing an object as a value in httpParams.set()
body: <p>I have a problem with more complex key value pair... what if I wanted to set for a value as an object?</p>
  
  <p>I am having this problem:</p>
  
  <pre><code>const includeStr = JSON.stringify({include: 'match-timeline-events'});
  const params: HttpParams = new HttpParams().set('filter', includeStr);
  </code></pre>
  
  <p>when I use it in:</p>
  
  <pre><code>this.http.get(environment.apiPath + '/clientMatches/' + id, {params})
  </code></pre>
  
  <p>I get in the headers then set this</p>
  
  <pre><code>(urlencoded): filter:%7B%22include%22:%22match-timeline-events%22%7D
  </code></pre>
  
  <p>but for some reason, the : doesn't get encoded and the string should've been</p>
  
  <pre><code>(urlencoded): filter:%7B%22include%22%3A%22match-timeline-events%22%7D
  </code></pre>
  
  <p>any ideas how to solve this?</p>