title: In URL `%` is replaced by `%25` when using `queryParams` while routing in Angular
body: <p>I wanted to navigate to a URL using <code>queryParams</code> while Routing in Angular.</p>
  
  <pre><code>&lt;a routerLink='/master' [queryParams]="{query:'%US',mode:'text'}"&gt;&lt;li (click)="search()"&gt;Search&lt;/li&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The URL I wanted to navigate is:</p>
  
  <pre><code>http://localhost:4200/master?query=%US&amp;mode=text
  </code></pre>
  
  <p>But when I click on search it navigates me to:</p>
  
  <pre><code>http://localhost:4200/master?query=%25US&amp;mode=text
  </code></pre>
  
  <p>I do not know why <code>25</code> is appended after the <code>%</code> symbol. Can anyone tell me a cleaner way to navigate correctly.</p>