10

I just getting my head around angular 2 and looking at designing a wizard type of application. Components on page 1 need to communicate data to components on other pages. Thinking of using a service to keep state/data which is injected in the next view/component of the wizard. The whole thing should be loosely coupled. I dont think it is useful to design a observable pattern because a component that is on one of the next pages/views are not visible yet. What new features in angular 2 could be used to solve this?

bier hier
  • 20,970
  • 42
  • 97
  • 166
  • Please add some code that demonstrates what you try to accomplish. Angular provides `@Input()`, `@Output()` for parent child relations (to some degree for siblings) and services for all others. – Günter Zöchbauer Apr 29 '16 at 07:06
  • what about old good passing parameters from one route to another? – smnbbrv Apr 29 '16 at 07:07
  • You could use a service with an RxJS `BehaviorSubject` to keep ensure the components that are not yet visible get the latest data when they initialise. https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md – Harry Nov 16 '16 at 13:37

2 Answers2

11

I suggest keeping your state centralized using for example Redux. You would then use the @Input() and @Output() of angular to propagate your state to components, and dispatch state changes from your components.

You would have a top level component that subscribes to state changes, and propagate those using child component @Inputs. Your child components would emit requests of state changes using @Outputs() to the top level component, which in turn updates the central state.

This way your individual component does not have to know anything about how state is stored and updated, they simply provide functionality and accepts input parameters that can have desired effect on their functionality.

If you have many deeply nested components they themselves also use @Input() and @Output() to provide the functionality, and does not communicate with any state store directly.

I'm myself using this method and it keeps each component very lean and reusable, while making it super easy to keep track of your state, and reduces the complexity of synchronizing your state across components a lot.

You should in addition have a look at ChangeDetectionStrategy and ChangeDetectorRef since you can simplify the component change detection using this method. All of your child components can generally use what's called the OnPush checking strategy, which means their change detection will only be run as their @Input() properties have changed. Since this is the only way state will change in this case you can tell angular not the check for changes otherwise. This will also help out with performance.

Note that you could keep the state using just a regular angular2 service, but something like Redux gives you some things for free like for example the dev tools provided. If you go with Redux, also have a look at Immutable.js as it is important not to mutate the state directly using Redux.

jgranstrom
  • 576
  • 5
  • 13
  • Thanks, that's a nice approach! In case of deeply nested child components, how do you get the state changes all the way back to the top level component holding the "main" state of the view/app? Do you have a chain of outputs going to the top, or is there a shortcut that can be used for bypassing these kinds of chains? – Janne Nov 13 '16 at 19:54
  • 1
    Generally you would have a chain of outputs going to the top. If it's getting way too nested to be comfortable to work with it might be worth looking at splitting the top level component's responsibility into more than one component that is manipulating and subscribing to different areas of the centralized state. – jgranstrom Jan 29 '17 at 16:04
  • 1
    I've yet to fully grasp the best practice and/or the way angular "wants" me to do this. For the most part I have been relying on lots of Inputs Outputs, but more recently I've realized I could just add some properties to a service and inject it to the components I need to save state from/between. The service essentially is more "centralized store" - maybe this is what Redux does, just way more sophisticated? Or no? Is there any problem with my approach to use a service(s) and rely on DI instead of lots of In/Outs. I just find it easier to inject the service. – default_noob_network Jun 23 '17 at 13:18
  • I think I already understand how naive my comment was ^^. Not only have I already made use of Redux in my app, I am using it now to do precicely what I was asking about (in terms of the notification between components/service at least, not necessarily the storing of state): https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2/35568924#35568924 – default_noob_network Jun 23 '17 at 14:42
7

Check @ngrx/store

RxJS powered state management inspired by Redux for Angular2 apps

dstr
  • 8,362
  • 12
  • 66
  • 106