Accessing encoded query params in Angular using activatedRoute

Question

I have angular application which is loaded after redirecting from another application. I want to access query params when authentication website returns to my Angular application. The url looks like

http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%[email protected]%26userAuthMode%3DSP=

I want to access the query params but I am not able to do it correctly using this.activatedRoute.snapshot.queryParams I suspect that it is due to encoded params. Is there any workaround ?

regards, Venky

What does "I am not able to do it correctly" mean? What is your code, what do you expect it to do and what does it do instead? Why does the website uses such a horrible parameter name, without any value? — JB Nizet
– JB Nizet, Commented Nov 18, 2017 at 15:52
Same problem here, Angular cannot retrieve my query params. Any solution ? — Christophe Gigax
– Christophe Gigax, Commented Nov 8, 2018 at 15:21

Jry9972 · Accepted Answer · 2018-07-18 14:10:17Z

3

You can decode the encoded URL using decodeURIComponent as answered by Venky. If you know the query params and want to extract the value from decoded URL. Use this function:

getQueryParamFromMalformedURL(name) {
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(decodeURIComponent(this.router.url)); // or window.location.href
    if (!results) {
        return 0;
    }
    return results[1] || 0;
}

If the url is http://localhost:4200/login?username=jerry&code=1234, then

this.getQueryParamFromMalformedURL('username'); // should return 'jerry'

answered Jul 18, 2018 at 14:10

Jry9972

4737 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Venky · Accepted Answer · 2017-11-23 06:56:53Z

2

I decoded the URL using following code. Then I could extract the params correctly

const encodedUrl = 'http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%[email protected]%26userAuthMode%3DSP='
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl);

answered Nov 23, 2017 at 6:56

Venky

4741 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Accessing encoded query params in Angular using activatedRoute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related