Angular navigate to component and bind its data

Question

I want to navigate from one component to another component and some data to it.

Here is the code:

this.router.navigate(['some-component', { name: 'Some Name' }]);

In SomeComponent I am catching route params like this:

this.route.params.subscribe(params => {
   //assign it to some component member, like
   this.name = (JSON.parse(params))['name'];
});

This works, but it does not give me the confidence, after page gets navigated to SomeComponent view, the url looks bad and it does not keep the state after page reload.

I would like to avoid route parameters.

What would be correct way to navigate to SomeComponent and send it value that will be used inside and binded to this.name for example.

These two components are not in child/parent relationship.

What do you mean by "the url looks bad"? What does the URL look like? — Micha Schwab
– Micha Schwab, Commented Jul 18, 2017 at 16:15
This is side thing, url look is less important. I think I am looking for pretty basic thing. Navigate to component and set some data on its public properties. — eomeroff
– eomeroff, Commented Jul 18, 2017 at 16:22
If you want to share data between component, as shared service is the most common scenario where there isn't a parent child relationship: angular.io/guide/… You'd just need to use (e.g) BehaviorSubject instead of Subject. — AVJT82
– AVJT82, Commented Jul 18, 2017 at 18:48

JGFMK · Accepted Answer · 2017-07-18 16:27:32Z

1

Could it be the space getting converted to %20?
If so that's default URL Encoding.
Check this out.
Syntactically what you've got seems to coincide with what I've learnt from here.
Maybe you need to URL Encode?

encodeURI('Some Name')

edited Jul 18, 2017 at 16:27

answered Jul 18, 2017 at 16:26

JGFMK

8,9974 gold badges65 silver badges101 bronze badges

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

6 Comments

eomeroff Over a year ago

Is there a way to avoid route params. What if I would need to send whole objects.

JGFMK Over a year ago

You have a few of options. Send id and use service to lookup data from your domain model. Or store object in cookie and retrieve it again. But if client browser has cookies disables it can break that approach. There is also LocalStorage. Though there is a cap on the amount you can store. Google "localstorage size limit" LocalStorage and SessionStorage can use up to 10MB of storage but the number is actually the sum of both. For IndexedDB, you can use up to 50MB on desktop, 5MB on mobile for free. However, the user can allow the limit to be removed by granting permission

eomeroff Over a year ago

thank you for explanation :) very kind. I think I will go with id and retrieve it again. I can not believe that angular has no options here.

JGFMK Over a year ago

There is something else too. InputBinding.. Try this angular.io/guide/component-interaction#!#bidirectional-service @Input() hero: Hero; in child and [hero]="hero" inside *ngFor of parent in their scenario.

eomeroff Over a year ago

thanks, it is not child component. I hate all these happy explanations. But when you have real problem you have to do it like it is 2009.

|

Collectives™ on Stack Overflow

Angular navigate to component and bind its data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related