How to get exact query params from URL in Angular

Issue

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?

Solution

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

Answered By - JayC