How to pass data between routed components in Angular

Question

I have a routed component like this:

From component A: I have an object that was fetched through an API, At the moment I have a button that is redirecting me to Component B.

There is no parent child relationship between components A and B.

What I want to do is to send that object while redirecting to component B, So I can work on it.

I don't want to pass the data through the URL like this:

 return this.router.navigate(['associate-product/' + this.id, {this.data}]);

Also I don't want to store the object on LocalStorage.

Is there a way to achieve this ?

When you say "There is no parent child relationship between components A and B." Do you mean that you don't use a service ? And if you don't use one, is it because you didn't heard about it or because you really don't want ? — Alexis, Jun 30 '21 at 08:31
I didn't heard about it, is there a service that can achieve this ? — Taieb, Jun 30 '21 at 08:32
A service is a ts file which is used by some components that use same variables/methods. This file allow you to share data through components just by injecting the service in them. — Alexis, Jun 30 '21 at 08:35
How Can I, Inject the service ? I have a service that will call the api on component A, I have the function that will construct the object that I need on the component B, how can i send it ? — Taieb, Jun 30 '21 at 09:06
[This](https://stackoverflow.com/a/57355485/11122892) worked for me. — Dwight, Jul 18 '22 at 08:09

YogendraR · Accepted Answer · 2023-01-05T11:12:39.513

Using Routing

If you want to pass data from one component to another using routing, you can use NavigationExtras.

In CompA you can do:

constructor(private router: Router){
}

goToCompB(){
  this.router.navigate(['route_to_comp_b/' + `${params_if_any}`], {
    state:{
      data: yourDataToShareWithCompB
    }
  });
}

In CompB you can do:

constructor(private router: Router){
 const data = router.getCurrentNavigation().extras.state.data;
}

PS: You can also use service based pattern as answered by others

score 0 · Answer 2 · answered Jun 30 '21 at 08:31

0

you can use a service with Subject/ Behavior in order to achieve that, like described in their docs

answered Jun 30 '21 at 08:31

Eytan

140
8

score 0 · Answer 3 · answered Jun 30 '21 at 09:39

Using service, you can share data through your components that injects the service.

I have created a stackblitz with a little example of possibility to share the data and to know when the data is retrieved from API.

On this example, you have 2 components, A and B, and a service, "example".

On your first component (A) you call the API to get data, on the example I've made a seTimeout to simulate an asynchronous call.

Then, when the call is finished, a button to move to b can be shown, and on component b there is the data that was retrieved from the timeout.

score 0 · Answer 4 · answered Jan 01 '23 at 16:41

One can use state object from NavigationExtras. Like others have mentioned

this.router.navigate(['your-component-route'], {
 state:{
   myComplexObject: dataObject
  }
});

Then fetch that object in other component like

constructor(private router: Router){
  const data = router.getCurrentNavigation().extras.state.myComplexObject;
}

**

IMPORTANT:

** Its worth mentioning here that this router.getCurrentNavigation() only has value in **constructor**, otherwise one won't be able to access in onInit. Hope this helps

How to pass data between routed components in Angular

4 Answers4

IMPORTANT: