"Refresh" observables | Angular Tips and Tricks
Вставка
- Опубліковано 14 лип 2024
- Async pipe in Angular is very convenient for expressing your observables in templates. But there might be cases when we need to "refresh" observables for new data, this is my personal way of doing it
Great! I spent all day to find a way to refresh observable and finally I found your video! Thank you very much!!! You're great!
Amazing video! Just what I needed!
I was looking for this! Thanks!!
You explained this really well 😌 thank you!
Beautiful Guy .... A lot of benefit for the people
Great video! You helped me a lot! Thank you.
Thank you very much for this. I was wondering how to refresh the page and your video popped out. It was very helpful for me. Hopefully will help others too. 😊
İ loved your approach , Excellent
Great video Gio. Keep it up!
love from Georgia ❤❤❤🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪
Thank you so much for this tip!
Glad it helped you, more tips and tricks coming soon
great explanation, as a beginner it is helped me a lot
Thank you 👍
very thanks i was looking for solution like this i was not sure :D
Nice explanation, can you please make the video on rx js operators like switchMap, mergeMap etc..
I like the way you are exploring the concept.
Thanks in advance.
Yeah, absolutely, I'll create several videos about common rxjs operators
I think there's a cleaner approach.
I would change the observable in the service into a subject or behaviorsubject.
Then inside the addUser() function in the service you can call .next() to add a user to your user list.
This way the component will automatically detect changes that are made in the service (which is the whole point of using observables in the first place).
With this approach there won't be a need for a refresh observable, and there won't be a need for any manual subscriptions.
The example is arbitrary. The video is about "refreshing" the observables when you need it, If that need is the result of bad design that's completely different matter
@@CodeWithGio Yeah I guess that's true.
I'm relatively new to observables and Angular, so I'm learning the fundamentals still. I don't yet have the insight in what is or isn't possible for each situation.
But by watching your video, it makes me wonder, is it possible to have such amazingly clean rxjs design in a project that 'hacky' approaches (no offense) like a refresh-subject aren't necessary?
Yeah, absolutely, ideally you should have a design where refresh happens implicitly on the pages that need fresh data, how to do that? Well that's a topic of its own
If there are two different components and we are using the same methodology, both the components flicker, after hitting a button in the parent component. Can you please try to implement same methodology, with parent/child components?
Nice video and example. But for production i would probably put the refresh logic inside the api.service because now i need to know the implemantation of the service inside my component which goes against the seperation of concerns principle. Only my two cents as a junior dev 😅
Hmm thought provoking, I guess you can do that, on the other hand separating refresh from the API service is also 'separation of concerns', i.e api call and refresh logic. Now thinking about it having the third class that manages refresh might be the best option
Very nice video! I was looking for something like this 👍🏻 for educational purpose I would know if there are other ways to achieve the same result inside the component (no use of service). Thanks in advance
Technically yes, I haven't thought much about it though. Basic idea is that you have to trigger the observable chain, how you achieve this, is up to you
Thank you very much. You mentioned there are many ways to do it, what else are they?
In reality there is no such thing as "Refreshing" the observable, think of observable like a function, you can't "refresh" the function, but what you can do, is to call that function again, let's say the function returns games list from HTTP call, if you call that function again later, it would "refresh". It's exactly the same with observables. What you do to "refresh" the function ? just call it again, what you do to "refresh" the observable ? just re-subscribe to it, that's essentially what I do in the video. Now there are many ways to re-subscribe it, you can create your own operator and pass down some trigger, you can implement special trigger class with necessary methods, if you use observables in the template, you can have functions that return them and basically call it and assign it to necessary variables. The point is there are as many ways to "refresh" the observable, as there are for calling a function. Hope it helps
@@CodeWithGio thank you this was very helpful
brother is it a good practise to maintain beahavoirSubject in service an next value whenever data in service(which is obtained from api) changes and we gonna subscribe it in a component where the data is need to be refreshed??? and bw u didnot subscribe that subject why???
Yes that is another good way to do it, encapsulate all the change logic into a single service and use subjects as public API for your components, once change happens, subject will be updated and components as well. What I've shown in this video is a different approach to achieve the same thing. You can use either one, depending on situation at hand
@@CodeWithGio thnks man u r late but i tried and achieved it !! thnku u brother
Hi Gio great video, do you perhaps have GIT repo with this tutorial?
Not yet
Push variable to trigger function... why not just call the function? Having trouble to see how is this not overcomplication and Promise call would be simpler.
This video is about refreshing the observable, not whether or not promise is better. Also calling function again would only update the template, not other code only subscriptions. Check my separate RxJs series, it would make more sense
Can we do this for a subscription instead of observable
Do you have any specific example in mind ? I'm not sure what refreshing the subscription means, you subscribe to observable and get subscription. Then you refresh the observable and get new value in subscription
Thanks for the clear video. In my case, I am getting data from an open-source API. How can I refresh my page when new data added to the API son ???
Note: I am not the owner of the API, they don't have post method to accept the data from users like me.
Thanks in advance for your response.
Well in this case you have to get the a notification of some sort that data on API side was changed. Usually APIs support some sort of websocket interface, that gives you such notifications. Once you receive the notification then you can refresh your data. If your API doesn't support such thing, then I think it's not possible to refresh your data, whenever change happens in backend. Another trick you can use, is to query the data with intervals, but this probably will cause some rate limit issues and API might block your requests completely.
@@CodeWithGio Appreciate your response. Unfortunately, this is an open-source API, I don't know if this API has such web socket notification functionality. Regarding, interval query option, it doesn't work my site. Thanks for the response again.
Couldn't you just have used ChangeDetectorRef instead?
ChangeDetectorRef works with Angular change detection i.e dom updates, it has nothing to do with observables
Nice :) btw, unsubscribing was missing, didnt fit to this Video maybe but should be done here, no?
So when using async pipe in the template for some observable, it's not necessary to manually unsubscribe (technically you can't even do that, because async pipe stores the subscription internally and we don't have access to that). If you have explicit subscription i.e obs.subscribe then yes, you need to unsubscribe
@@CodeWithGio oh I didn't know that, good to know 👍
Thats why people hate angular, Have to write tons of lines to do a simple task. It can be done easily with real API and AJAX.
You are missing the point, observables and fp scale really well
You just don't know how to do it properly.