Passing hidden parameters to the external link using angular

Question

I want to navigate and pass some hidden parameters to an external link from the angular router.

Say I have an angular app running on www.demo.com and I want to navigate to www.xyz.com with some hidden parameters using angular router.

I tried using router.navigate() but I guess it only works within the application, not with external links.

Html

<a class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button" type="button" (click)="enterUrl($event)">
<span class="button-text">Enter Url</span>
</a>

Component

enterUrl(event:any){
    var final_url = 'www.xyz.com'
    this.router.navigate([final_url], { queryParams: {token: this.token}});
  }

Please suggest a solution. Thanks

score 0 · Answer 1 · answered Jun 27 '18 at 04:42

0

No, You can't send hidden params to any external link.

But below is the Use case for internal navigation within the Angular application.

IMO for your use case data property would help you to achieve your requirement.

const routes: RouterConfig = [
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

So, You will get your content you passed like this -

this.route.data.subscribe(data => console.log(data));

PS: But as of my knowledge you can send only static data using data property.

The data property in the third route is a place to store arbitrary data associated with this specific route. The data property is accessible within each activated route. Use it to store items such as page titles, breadcrumb text, and other read-only, static data. You'll use the resolve guard to retrieve dynamic data later in the guide.

answered Jun 27 '18 at 04:42

Pardeep Jain

84,110
37
165
215

Thanks but I know how to do internal navigation in angular. If we cant pass hidden params, can we use same session? – User0706 Jun 27 '18 at 04:51
session is again domain specific I guess, which may be again not useful for your use case – Pardeep Jain Jun 27 '18 at 04:55
Actually, the scenario is, I have two different domains, but the token to access the API has to remain same in both the cases. So, I am confused how to achieve the same – User0706 Jun 27 '18 at 04:56
So you can make another domain as subdomain of first one and you can share common localstorage for the same, isn't is? – Pardeep Jain Jun 27 '18 at 05:10
Not sure about the different domains – Pardeep Jain Jun 27 '18 at 05:26
Hey, if I keep the domain same and make the second one as the subdomain, then how we can share the localstorage? – User0706 Jun 27 '18 at 11:43
Localstorage is common for single domain, so whenever you store data in domain and navigate to its subdomain. you will be able to access that storage – Pardeep Jain Jun 27 '18 at 11:58
say I have xyz.shop.com and abc.shop.com, so can I access the data stored in xyz.shop.com while navigating to abc.shop.com? – User0706 Jun 27 '18 at 12:05
Yes, I think so, Haven't tried yet but should be accessible – Pardeep Jain Jun 27 '18 at 12:49
I tried it, we can't. I guess if we store data in www.shop.com, then we can access it in xyz.shop.com or abc.shop.com – User0706 Jun 27 '18 at 12:51
Yup, that is surely possible even I tried the same, But both for sub-domains I am not sure – Pardeep Jain Jun 27 '18 at 12:52

score -1 · Answer 2 · answered Jun 27 '18 at 04:45

-1

Firstly, this.router.navigate just work only angular application. No way to do your request with it.

Have a solution in this case is use javascript to open new tab.

You can refer here: Open a URL in a new tab (and not a new window) using JavaScript

answered Jun 27 '18 at 04:45

Dinh Duong

297
2
10

It's not only about navigating to the external URL, it's about navigating with some hidden params – User0706 Jun 27 '18 at 04:48
`running on www.demo.com and I want to navigate to www.xyz.com` ??? you said, right? – Dinh Duong Jun 27 '18 at 06:15
And then if I no mistake you want to pass the token to `www.xyz.com`, is it correct? Firstly you should be understand about it, it not problem of angular. – Dinh Duong Jun 27 '18 at 06:18
I guess u didn't read the whole question. It says "app is running on www.demo.com and I want to navigate to www.xyz.com with some hidden parameters using angular router". And it is a question related to angular – User0706 Jun 27 '18 at 06:22
But the `this.router.navigate` just resolve the routing for angular app **only**. And then angular is just the framework that wrapper by javascript. Navigate to another `domain` is diff thing, why you want keep your mind is use `angular router` to do this. – Dinh Duong Jun 27 '18 at 06:26
I know router.navigate works with in app routing only. That's why I asked if there is any way to achieve what I want using angular router. And I'll be grateful if you can help me out with the issue I have rather than arguing on something which is irrelavant – User0706 Jun 27 '18 at 06:33
Ok I don't want to arguing or something like that, but like as my comment before, I surely no way to do with `angular router` and no way to go external link with hidden values (at least it's based on my experience). I will wait your update to get it. – Dinh Duong Jun 27 '18 at 06:39

Passing hidden parameters to the external link using angular

2 Answers2