How to pass data using state when opening a url in a new tab in Angular 8

user_7158344 0
Viewed 3121

I am able to pass data using state when opening a url in the same tab. I used the following snippet.

<a routerLink="/testPage " [state]="{ hello: 'world' }">click here</a>

But, when I try the same with target="_blank" attribute to open in a new tab. I am not able to get the data from state.

<a routerLink="/testPage " [state]="{ hello: 'world' }" target="_blank">click here</a>

I could pass the data using query params. But there is a limitation in size of query string. Is it possible to pass data using state in a new tab ?

angular typescript javascript
3 Answers

You have multiple solutions to achieve what you want:

Passing the state in the URL

By putting directly your state object in queryParams input

<a routerLink="/testPage " [queryParams]="{ hello: 'world' }" target="_blank">click here</a>

Then you can retreive your state with:

this.route.snapshot.queryParams

With this method you can get they queryParams as an object and get your state back. The problem is that if you need to add other information to the query, it will interfer with the state you send.

  • By encoding the state and sending it in a single parameter of your query
<a routerLink="/testPage " [queryParams]="{ state: encodeURIComponent({ hello: 'world' }) }" target="_blank">click here</a>

Then you can retreive your state with:

decodeURIComponent(this.route.snapshot.queryParams.state)

More information about the function: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent

The problem with this solution is that you will be limited if the uri is too long (if you have a big state).

Using client side storage system

You can use localStorage, sessionStorage or cookies.

Simply store the state in the localStorage:

localStorage.setItem('state', JSON.stringify(state))

and retreive it:

JSON.parse(localStorage.getItem('state'))

With this solution, do not forget to remove the state from the localStorage just after consuming it.

user_78291230

Using localStorage would solve your problem. This way you can persist data between site reloads and opening different tabs.

user_16330070

You can pass it as query params.

<a routerLink="/testPage " [queryParams]="{ hello: 'world' }" target="_blank">click here</a>

And you access it by using ActivatedRoute:

constructor(private route: ActivatedRoute) {}
...
this.route.snapshot.queryParams // This is what you want to get
user_123645580
Related