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.

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.

• javascript
• angular
• typescript
• routes
• angular4-router

Share Improve this question Follow asked May 26, 2018 at 8:26 Praveen OjhaPraveen Ojha 1,21111 gold badge1515 silver badges2222 bronze badges 6

• It is working correctly. % is the escape character for URL encoding, so literal % characters must be escaped, otherwise your URL is invalid. If this concept is new to you, read about it here. – Jonathan Hall Commented May 26, 2018 at 8:29
• I tried using \% but it is also not working – Praveen Ojha Commented May 26, 2018 at 8:32
• No. It is working. %25 is correct. '\' is not an escape character in a URL. – Jonathan Hall Commented May 26, 2018 at 8:33
• 2 Please read what I have said, and follow that link. You are already using % correctly. – Jonathan Hall Commented May 26, 2018 at 8:36
• 1 if you wanna change url structure you can try angular url serializer stackoverflow./a/49618237/4399281 for your case may be it is: function cleanUrl(url) { return url.replace("%25",'%') } – Fateh Mohamed Commented May 26, 2018 at 12:41

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

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./en-in/help/969869/certain-special-characters-are-not-allowed-in-the-url-entered-into-the

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