Passing data into router-outlet child components

Question

I ve got a parent component that goes to the server and fetches an object      parent component   Component       selector    node-display       template              lt router-outlet  node   node  gt  lt  router-outlet gt            export class NodeDisplayComponent implements OnInit        node  Node       ngOnInit    void           this nodeService getNode path               subscribe                  node   gt                        this node   node                                     err   gt                        console log err                                            And in one of several childdren display   export class ChildDisplay implements OnInit        Input       node  Node       ngOnInit    void           console log this node              It doesn t seem I can just inject data into the router-outlet  It looks like I get the error in the web console   Can t bind to  node  since it isn t a known property of  router-outlet     This somewhat makes sense  but how would I do the following    Grab the  node  data from the server  from within the parent component  Pass the data I have retrieved from the server into the child router-outlet    It doesn t seem like router-outlets work the same way

User · Answer

There are 3 ways to pass data from Parent to Children

Through shareable service : you should store into a service the data you would like to share with the children
Through Children Router Resolver if you have to receive different data
```
this.data = this.route.snaphsot.data['dataFromResolver'];
```
Through Parent Router Resolver if your have to receive the same data from parent
```
this.data = this.route.parent.snaphsot.data['dataFromResolver'];
```

Note1: You can read about resolver here. There is also an example of resolver and how to register the resolver into the module and then retrieve data from resolver into the component. The resolver registration is the same on the parent and child.

Note2: You can read about ActivatedRoute here to be able to get data from router

User · Answer

Service  import  Injectable  EventEmitter  from  quot  angular core quot         Injectable   export class DataService   onGetData  EventEmitter   new EventEmitter     getData       this http post    params  map res   gt        this onGetData emit res json             Component  import  Component  from   angular core       import  DataService  from  quot    services data service quot                Component   export class MyComponent     constructor private DataService DataService        this DataService onGetData subscribe res   gt           from service on  emit                     To send data to all subscribers from current component   sendData         this DataService onGetData emit --NEW DATA--

User · Answer

G  nters answer is great  I just want to point out another way without using Observables    Here we though have to remember that these objects are passed by reference  so if you want to do some work on the object in the child and not affect the parent object  I would suggest using G  nther s solution  But if it doesn t matter  or actually is desired behavior  I would suggest the following      Injectable   export class SharedService        sharedNode              properties            In your parent you can assign the value   this sharedService sharedNode   this node    And in your children  AND parent   inject the shared Service in your constructor  Remember to provide the service at module level providers array if you want a singleton service all over the components in that module  Alternatively  just add the service in the providers array in the parent only  then the parent and child will share the same instance of service   node  Node   ngOnInit         this node   this sharedService sharedNode          And as newman kindly pointed  you can also have this sharedService sharedNode in the html template or a getter   get sharedNode      return this sharedService sharedNode

User · Answer

lt router-outlet  node   quot     quot  gt  lt  router-outlet gt    is just invalid  The component added by the router is added as sibling to  lt router-outlet gt  and does not replace it  See also https   angular io guide component-interaction parent-and-children-communicate-via-a-service  Injectable    export class NodeService     private node Subject lt Node gt    new BehaviorSubject lt Node gt          get node         return this node asObservable   filter node   gt    node          addNode data Node        this node next data            Component       selector    node-display       providers   NodeService       template              lt router-outlet gt  lt  router-outlet gt           export class NodeDisplayComponent implements OnInit       constructor private nodeService NodeService         node  Node      ngOnInit    void           this nodeService getNode path               subscribe                  node   gt                        this nodeService addNode node                                      err   gt                        console log err                                              export class ChildDisplay implements OnInit      constructor nodeService NodeService          nodeService node  subscribe n   gt  this node   n

User · Answer

Yes  you can set inputs of components displayed via router outlets  Sadly  you have to do it programmatically  as mentioned in other answers  There s a big caveat to that when observables are involved  described below   Here s how   1  Hook up to the router-outlet s activate event in the parent template   lt router-outlet  activate   quot onOutletLoaded  event  quot  gt  lt  router-outlet gt    2  Switch to the parent s typescript file and set the child component s inputs programmatically each time they are activated  onOutletLoaded component        component node    someValue       Done  However  the above version of onOutletLoaded is simplified for clarity  It only works if you can guarantee all child components have the exact same inputs you are assigning  If you have components with different inputs  use type guards  onChildLoaded component  MyComponent1   MyComponent2      if  component instanceof MyComponent1        component someInput   123      else if  component instanceof MyComponent2        component anotherInput   456         Why may this method be preferred over the service method  Neither this method nor the service method are  quot the right way quot  to communicate with child components  both methods step away from pure template binding   so you just have to decide which way feels more appropriate for the project  This method  however  avoids the tight coupling associated with the  quot create a service for communication quot  approach  i e   the parent needs the service  and the children all need the service  making the children unusable elsewhere   Decoupling is usually preferred  In many cases this method also feels closer to the  quot angular way quot  because you can continue passing data to your child components through  Inputs  thats the decoupling part - this enables re-use elsewhere   It s also a good fit for already existing or third-party components that you don t want to or can t tightly couple with your service  On the other hand  it may feel less like the angular way when    Caveat The caveat with this method is that since you are passing data in the typescript file  you no longer have the option of using the pipe-async pattern used in templates  e g     myObservable    async     to automagically use and pass on your observable data to child components  Instead  you ll need to set up something to get the current observable values whenever the onChildLoaded  function is called  This will likely also require some teardown in the parent component s onDestroy function  This is nothing too unusual  there are often cases where this needs to be done  such as when using an observable that doesn t even get to the template

User · Answer

Following this question  in Angular 7 2 you can pass data from parent to child using the history state  So you can do something like     Send   this router navigate   action-selection      state    example   bar              Retrieve   constructor private router  Router      console log this router getCurrentNavigation   extras state example        But be careful to be consistent  For example  suppose you want to display a list on a left side bar and the details of the selected item on the right by using a router-outlet  Something like     Item 1  x                                                    Item 2  x          Selected Item Details         Item 3  x                                                    Item 4  x                                                      Now  suppose you have already clicked some items  Clicking the browsers back buttons will show the details from the previous item  But what if  meanwhile  you have clicked the  x  and delete from your list that item  Then performing the back click  will show you the details of a deleted item

[angular] Passing data into "router-outlet" child components

Examples related to angular

Examples related to dependency-injection

Examples related to angular2-routing