My go to way to manage state in Angular applications

I don't get the purpose of declaring articles$ private then exposing it unmodified with the getArticles,..yes typescript may fail to compile but the returned value is technically a BehaviorSubject and you'd still be able to call next() and emit a new value from outside. A safer option is to return articles$.asObservable()

It is not recommended to call next of another subject inside subscribe

Will the data be available on page refresh?

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...

I don't think this is (not yet) a state management system.

1. You miss a function to set the state from the outside.
2. You miss the getValue method of BehaviorSubject to get the last emitted value directly (important for usage in components).

It is more like a better way of getting data from an api and present it as an BehaviorSubject + add a function for filtering.

Btw: I really like your videos :)

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?

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

Why not start behavioursubject with null? It's less ambiguous imo. Articles could be empty when arrived. But null only before arrived @Joshua

Clear and concise description of the method used

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.

I think init method is an anti-pattern

Hey Josh, very helpful topic. I wanted to ask would this approach update the UI based the database has been updated. So for example if I create a new article would the list of articles be updated without me having to refresh the page? Thanks in advance. :)

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

What about the subscription inside the ArticlesService? Are you not unsubscribing from that?

Thank you very much for the insight :)

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

ng rx no? bra

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.

Please do a video in Ngrx.

Love to see ngrx content.please make it

What's your reasoning for subscribing to an observable and then creating a new one in a service? IMO the beauty of rxjs lies in the pipe methods that let you manipulate the data without the need to break the chain along the way. And if you need to get a value on subscription you can just use one of the replay methods, afaik.

One question:

I have the following flow:

- a service which reads "news" items from a database,
- the "news" interface with title, text, image, etc.
- the "homepage" view (ts & html)

if I use a local json file and I update one of its values, it automatically update the view with the new values but, if I read the news-items from a database the only way to get the updates values is to call an "update" function every X seconds or entering the view again.
There is any chance that it takes automatically the update values from the database or to automate the refresh-call ? (something similar happens with firebase if i'm not wrong)

Not only this video useless for an experienced developer but also harmful for the beginners. This approach completely ignores the huge power of rxjs with caching with shareReplay and startWith which is stated in the comments below but also introduces code smell in init() method which shifts this responsibility to UI component thus making such service way worse than a 'classical' one.

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.

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

Thank you for this intertesting video :-)

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

Do you see any strong benefit in using the BehaviorSubject opposed to a regular Observable with the shareReplay and startWith operators in your specific scenario? Of course, if you'd be pushing new data from different "places" inside of your service, the Subject-based approach would be the way to go. And: +1 for some NgRx vids! Thanks ✌

please a video for the NgRx store, some applications need "order" and less freedom.

Great stuff, I'm in the process of learning more Rxjs now, been always doing the .promise() for everything and this year I started to try to keep my data more as Observables where possible, so using the operators, and learning how everything works :)

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.

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

Please post a video about NgRx.