1

What is the easiest way to pass data around components? I get that for Parent-> child you should use @Input however it's not really seems usefull if you are using router-outlet, since you need to access the child's template(and i don't get it how can you do that when you use router-outlet) and/or a big application. Other than that it's only doable with a service correctly right?

This seemed a good explanation but I can't translate it to my issue. Since I am on a bigger project (junior and learning angular as i work) and i can't just pop in some values here & there.

Also i've started with a service but my superior said that i don't need it, however service usage seemed reasonable to me.

Exitl0l
  • 459
  • 2
  • 11
  • 27
  • If you want to pass route params, you need to create a different component that get's and transforms what you need from the route params and passes them as inputs to the child component. – Andrei Tătar Mar 05 '19 at 16:04
  • The best way is ngrx but it's not so easy or you can take a look to https://angular.io/api/router/Resolve – Whisher Mar 05 '19 at 16:06
  • @Whisher I'd rather write a service to handle the communication than torturing myself with that. Some Angular docs seem lackluster to me, this one included. – Exitl0l Mar 05 '19 at 16:52

1 Answers1

0

You can definitely share data with a service although it could be seen as a code smell since you generally try and avoid statefulness in services.

From my experience though, it is generally better to make components responsible for themselves. Since these pages are siblings, I would look into making the sibling component responsible for getting the data as well.

An alternative if the data is small enough or just some id's is to use query string parameters to pass the data.

EDIT: An alternative is also to use a library like NGRX, but that is going to have a lot of overhead in setting up.

Derked
  • 934
  • 10
  • 17
  • As much as i' like to ease up my life i cannot fiddle with dependencies and such. This is an ongoing project i am way too junior to have impact on that i think. If not done with a service how'd you pass data around components via "built-in" angular tools? – Exitl0l Mar 05 '19 at 16:55
  • If NGRX isn't an option, where are you getting the data that needs to be passed from? Can you access the same data from a REST call? If so you could just make the sibling component responsible for getting the data. The biggest problem with the service is you will have to manage the stateful data in the service which isn't generally desirable. The other option is you could put it into local storage or something similar. – Derked Mar 05 '19 at 19:18
  • I have 2 components one is a list that gets a list of users and if you click on one user it routes you to the edit page where you should edit said user and getting the data from the list(this is where i fail at the moment). I could call the rest again from the edit component but isn't that resource consuming? to call it again even i should have the data since it was known by the list component. – Exitl0l Mar 06 '19 at 08:08
  • Yes, you should make the REST call and get the individual user. Depending on your API you might need more information on the individual page than the list page and could return different DTO's. Also since you are using the angular router, what happens if someone opens the page through a link instead of through the list? If you used a service to store the data then your page wouldn't work. In general, REST api's are designed to receive many small requests. – Derked Mar 06 '19 at 16:33