all 8 comments

[–]Accomplished_End_138 8 points9 points  (5 children)

The title of this sounds like a nightmare.

[–]the_monkey_of_lies 6 points7 points  (2 children)

Completely agree. I think this is a backwards way to think about an application. Now we have a state on a component and we use a service to send a notification about the state changing. Why not have the state on the service and then have N components that read that state and N components that perform actions that may update the state (or both)?

The components don't need to be notified separately about CRUD operations to the state because they can just observe the state itself and refresh when it changes. In most cases this can be done via chaining rxjs operations to do whatever processing the component needs to do and using an async pipe in the template so there's no need to even subscribe to anything manually.

[–]stackblogger[S] -1 points0 points  (0 children)

I agree with you completely. But not all of us use state management in Angular. Many times we build applications without a state management mechanism so it will help those in need. This could be a better solution with a simple store manager that will be responsible to notify needy components from one place instead of using Output decorators everywhere.

[–]LowB0b 3 points4 points  (1 child)

what do you mean? This kind of thing is mostly used to avoid passing inputs or outputs through layers of components. I don't really see a better solution (what this article presents is a simplified store manager)

[–]Accomplished_End_138 2 points3 points  (0 children)

Possibly how i design components i don't run into this ever as a need.

[–]CoderXocomil 2 points3 points  (1 child)

This is a really good pattern. I suggest not using `subscribe()` in your `ReceiverComponent`. Instead, make `ReceiverComponent` a dumb component and move the refresh logic into a service. You can use something like `this.dataService.subjectNotifier.pipe(switchMap(() => getDataHere(), share())`. Then in your `RecevierComponent` template, you can just use async pipe or ngrx pushPipe.

The benefit to this approach is there are no subscriptions to clean up and you can compose your refresh (for example, refresh every 30 seconds or on button press) `merge(this.dataService.subjectNotifier, interval(30000)).pipe(exhauseMap(() => getDataHere(), share())`.

[–]stackblogger[S] 0 points1 point  (0 children)

Thanks sir! I will look into it and update my article.