My go to way to manage state in Angular applications

In this video we take a look at how to use the "Service with a Subject" approach to managing state with RxJS in an Angular application.

0:00 Introduction
0:36 Setting up the Subject
1:47 Accessing the stream
3:11 Emitting data
4:47 Sharing streams
5:22 Modifying streams
6:15 Accessing state
7:51 Conclusion

#angular #rxjs #ionic

[bamboo]

If you haven't already, it might be a good idea to make an updated version of this, perhaps create a service for CRUD that uses generics and can be extended and used for various API endpoints

[niravparsana]

Very helpful topic. Please do video on NgRx as it is more flexible for managing state in complex application. It would be good if you start with basic topics as NgRx is wide subject.

[jaredwilliams]

I have implemented the "service with a subject" pattern in several applications, and it works great for sharing the data from the service to the components. However, I feel that there isn't a lot of examples out there demonstrating how the component is supposed to share new/modified data back with the service in a reactive way.

[stephenjames]

Clear and concise description of the method used

[NvmThemHereIAm]

I instinctively created a similar pattern (as in not making the subject private and accessing it straight away). Thank you for this explanation!

[jacobshomali]

I tried using services and observables like this in angular but couldn't quite get it to work. The solution I came to eventually was to use redux instead but I'm glad I can finally figure out how to do it this way.

[luismpcunha]

Good info, will definitely be using the approach of separating getting all of the data from getting only the new elements going forward.

[kflo]

You should add a note about how you go against the grain in your naming of the BehaviorSubject variable: the dollar sign suffix is by-and-large used just for Observables.

The BehaviorSubject of course is an observable by nature, but even you made an Observable/Subject distinction in your getter method. This is another distinction worth at least noting.

[EverydayJavaScript]

Nice video. This helped me fix one of the issues in my project.

[AdrienSAULNIER]

Nice video, ty ! Some questions :

- How to set/handle UI state in your example (articles loading) into the service ? Do you create a new observable such as loading$ (or callState$ which represents the actual HTTP call status) or a state object containing the array of articles AND the ui state in the same object ?
- How to handle error ?
- How to handle substate (a child object by example, which depends of articles feature) which has is own ui state too ? Do you create new service or do you manage this substate into the ArticlesService ?

I try and read so many many (many...) things and I never found the best (and universal) approach for those cases. It breaks my brain and raises doubts...

Ty !

[pawekoaczynski]

2:15 I'm pretty sure you are still able to call the `next` method.
Heah, you will get TypeScript error, but you can make it go away with @ts-ignore. I believe that adding the type annotation doesn't really do to the underlying object's structure - it still has the same methods, TypeScript doesn't make the fields private.
Combined with explicitly adding return type makes me don't really like this solution. Though I can see other people seeing my comment as a nitpick :p

[jayasaichandmaheshmunagala]

Love to see ngrx content.please make it

[f-xk]

Thank you very much for the insight :)

[ilclaudio]

Thank you for this intertesting video :-)

[stunna]

where you start the init function ?inside the service? in the app component? how should we initialize the article$?

[satheshkumar]

would be useful if you could prepare a tutorial on best practices using ngrx

[KeganVanSickle]

Observables and updating their state is how I manage large datasets.

[will-ever]

Would public *readonly* articles$ be better in the service than a private one with a method? For the cases when data is requested only in init, of course...

[kunalvirk]

I tried this but struggling to make it work. So I have about four services `UserInfo`, `TeamService`, `ProjectService` & `FilterService`. They depend on each other in the mentioned order i.e. `FilterService` depends on `ProjectService` which depends on `TeamService` which depends on `UserInfo`. `UserInfo` does the authentication via Auth0. So in the application when I try to get userInfo, I get undefined (ofcourse it is all asynchronous) but how to make it work. I don't want to introduce my application to NgRx if it can be handled by angular. Can you please help on this?

[go]

Will the data be available on page refresh?