How to get exact query params from URL in Angular

Question

I follow another stack overflow post regarding on obtaining query params. However, query param has a value that contains "%2" which coverts this to a "+" when outputting in my angular. Also, my param2 does not store whole value "testingsomething?INT/" it stops right before '?'.

Example:

*Query Param*
/app?param1=hallo%2testing111&param2=testingsomething?INT/

Code in component.ts

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
        console.log(this.param1);
        console.log(this.param2);


    });
}

Output

hallo+testingsomething

As you can see my "%2" is converted to "+" when storing the params. and testingsomething expected output should be "testingsomething?INT/"

Update

I was able to resolve the issue in the param1 (mentioned the answer in the answer section).

I am still stuck with issue with param2. enabling to extract the exact param "testingsomething?INT/"

Reference: How to get query parameters from URL in Angular 5?

How are you generating this url? If an url contains special characters, they should have already been UrlEncoded while generating the url. So instead of literally %2 you should have %252 in order to get %2 in angular — Pieterjan
Well it's not just %2. If the usertoken comes in as %2F it becomes "/". Is there any way I can avoid it from converting when storing it into anglar? — Jesse
How/where are you generating this url? Please add this code snippet to your question so we can help you. — Pieterjan
I don't have access to the backend code or logic on how they are generating this query param Value. I just know that some values that get generated will contain "%". As per my requirement is to extract those query params and utilize them. — Jesse
Angular is reading the query parameter correctly. Your backend code will have to be updated in order to urlencode the parameter values in the querystring. There's no other way around. If you want to be creative you could take the window.location.href, find the first ?, substring from there, and process manually. But that's just a fix for something gone wrong in another place — Pieterjan

Jesse Jesse · Accepted Answer · 2020-08-21T14:21:03

I was able to find a reference that was able to help resolve param1 issue. Reference

Here is the change in my code that resolved my issue. Same code above but this one line changed.

this.param1 = encodeURIComponent(params['param1']);

New Output

hallo%2testingsomething

How to get exact query params from URL in Angular

1 Answers