In URL `%` is replaced by `%25` when using `queryParams` while routing in Angular

Question

I wanted to navigate to a URL using queryParams while Routing in Angular.

<a routerLink='/master' [queryParams]="{query:'%US',mode:'text'}"><li (click)="search()">Search</li></a>

The URL I wanted to navigate is:

http://localhost:4200/master?query=%US&mode=text

But when I click on search it navigates me to:

http://localhost:4200/master?query=%25US&mode=text

I do not know why 25 is appended after the % symbol. Can anyone tell me a cleaner way to navigate correctly.

Answer 1

In URLs, the percent sign has special meaning and is used to encode special characters. For example, = is encoded as %3D.

Certain special characters are not allowed in url. If you want to use those in url you have to encode them using encodeURIComponent javascript function. %25 is actually encoded version of % character. Here browser is encoding them itself.

When trying to get queryParams from url , you can decode them using decodeURIComponent.

For more information check : https://support.microsoft.com/en-in/help/969869/certain-special-characters-are-not-allowed-in-the-url-entered-into-the

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent