"Hello Sir, I absolutely love your videos-they’ve been a huge help in my learning journey! 🙌 Could you please make a video on Angular Elements and Micro Frontends? It would be amazing to learn about these topics from your expertise. Thank you for all the great content! 😊"
I jjust want to let you know that I'm deeply grateful for your videos, they are the best so far in the Angular field AND I just had a job offer as angular developer thankful to you too! Big hug!! thank you again!!
Wow, thanks for this awesome introduction! So cool to see it in a real world context that instantly sparked my immagination where we can use it in our app! Thank you, you are the real MVP! :)
Thanks for this deep dive into the new Angular feature. Right now, I see the mess and overhead of using the Resource feature. I want to see some consistency in its use, like with the Rxjs, where you see the stream and necessary operators. Right now, it is a very raw approach with a ton of overhead to achieve simple behavior. I'm glad that the Angular team wants to find a standardized approach for daily routine, but something goes wrong with it.
Great stuff, thanks! I hope Angular team will be able to provide as good experience as you can have with Tanstack Query (Angular's adapter is in experimental phase, but seems to be working fine with signals). The resource API lacks the production-grade server data caching. Maybe it could be an idea for your next video to show how to implement real-world caching mechanism with Angular?
Thanks a lot for this video! I have a question, what's your approach to check angular's source code? Do you open angular's source code in another window or something? I want to be able to debug it on my project too, can i do that?
Very very useful! Thanks a lot!! 😊 Dmitro, do you plan a new commercial course using latest Angular version? Would like to see latest best practices, how the todays way looks like to handle tokens/refresh tokens by creating the corresponding app structure. I ceated several small Angular Apps but I am looking for the ideal way of solving daily problems. I think some example applications would be great. 🙏
Thanks! I'm wondering all these new API's how they combine with SSR. I mean: most common use case would be to load async data based on an input signal linked to route parameter by withComponentInputBinding(). In the context of SSR so far the only practical way to ensure the data is loaded before the server sends back the html is to use a resolver function in the route config. This means both the withComponentInputBinding() and the new resource API are useless in this scenario. Unless Angular will wait (or is instructed to wait, I don't know how) for the data to be fetched before going stable and returning the html. What do you think?
Hey! Thanks for this comment. I am actually not so experienced with SSR at the moment, so I can’t say anything exactly. Maybe we will see something like waitFor() likewise it is done in AnalogJS…
Hi Dymtro,You explained the concepts of resources really well ❤ and I found your explanation amazing 🔥🔥! But I was wondering if you could clarify something about "untracked" in the resource function. Could you explain what that means? Thanks!
I appreciate for the detailed explanation of the resource API. The only missing piece in this case is debounceTime. Will we have it without using rxjs soon? What do you think about it?
Yes, this is one of the features I also would like to see. I think we will see something similar to debounceTime but I can not say for sure. It is too early stage to say anything exactly :)
It is straightforward to implement. Inside the loader function, before returning, write await wait(300, param.abortSignal); // param is the object that is passed in the loader function (or you can destructure it) and the wait function is something like function wait(ms: number, abortSignal?: AbortSignal) { return new Promise((resolve) => { const onAbort = () => { clearTimeout(timeoutID); resolve(undefined); }; const timeoutID = setTimeout(() => { abortSignal?.removeEventListener('abort', onAbort); resolve(undefined); }, ms); abortSignal?.addEventListener('abort', onAbort); }); }
@@user-if1de8pt2j Which is? They do not understand closures to write it on their own? The general debounce function is a 5-line decorator function. Its not cryptography.
idk why but that looks 4 me like smth with more boilerplate than standart approach. A way of handling that situation by simply establishing formcontrol on a serch input and then subscribing to its valuechanges with further switchmap looks much more laconic
Hey :) I think it looks more laconic until you start adding error handling, loading/reloading, reset features, etc. Once you add this, you might end up with a solution which looks more complex and has the same (or even more) lines of code :)
Hi i have a question. What if i want to use your code but extend it and be able to load that query search parameter via input - as URL query parameter - and put it in input and then be albe to work with it. what the code would look like ?
Well, something similar to distinctUntillChanged() you can achieve using the property "equal" in resource config. There it also takes a predicate function which defines if the value considered to be changed or not. If the predicate function returns true (value changed), it will notify dependant signals about the change. Regarding the debounceTime. Unfortunately, there is no alternative for it (yet). I hope we will see something later
Hey! No, ResourceAPI works with any Promise-Based async operations. In the video, the HTTP calls (GET call in particular) was used as an example but it doesn't mean that resource should be used only with HTTP calls or only with a specific http call type.
I also hear about an rxResource function, is it happening or a its a myth? I mean we could use something to handle pipes like debouncing and maps when loading these resources
The resource api works with Promises. To work with observers there is a rxResource. It works almost the same way as Resource but instead Promise the loader should return observable
I really don't like this one. For me it's like Angular is coming to react side of force with this thing. I like Angular because it has separation of concerns and with this resource people will start to do this instead of use a service for example.
Agree, i think writable signal and computed are enough. Linked signal and resource are unnecessary complications. Hope they are going to be removed in v20
🔥 Advanced Angular Courses - bit.ly/df-courses
Get Courses Now With -25% off during the Black Friday Sale!
i really like how angular is evolving. standalone components, simpler reactivity options, easier backend integrations. good stuff
Yes, I also quite impressed by new features and how signals are being adopted :)
My favorite Angular youtuber posted a video 🥳🥳🥳🥳🥳🥳
Its always a pleasure learning from you
Thank you! Enjoy 😊
I am a huge fan of how Dymtro explains concepts. I feel like I was using resource all this while :). Keep up the good work man
Thank you! Glad you like it :)
"Hello Sir, I absolutely love your videos-they’ve been a huge help in my learning journey! 🙌
Could you please make a video on Angular Elements and Micro Frontends? It would be amazing to learn about these topics from your expertise.
Thank you for all the great content! 😊"
This guy is the MVP!
Thanks for another useful video, Dmytro) Just watched Angular 19 release and hope you will explain to us all new features in details))
You are welcome! More to come 🙌🏻
I really appreciate your videos and I admire the way how you try to understand the framework analyzing the source code. Thanks a lot!
I jjust want to let you know that I'm deeply grateful for your videos, they are the best so far in the Angular field AND I just had a job offer as angular developer thankful to you too! Big hug!! thank you again!!
Wow, thanks for this awesome introduction! So cool to see it in a real world context that instantly sparked my immagination where we can use it in our app! Thank you, you are the real MVP! :)
Pleasure to have a such great Angular lover ❤
What about debounceTime() on query signal?
There is no alternative to it. However, I hope later we will see something similar ;)
@@DecodedFrontend this API looks cool but I can imagine people doing tones of s*** on it. Signals are cool but rxjs are powerful.
It might be possible to simply wrap the loader function in a debounce from lodash, but I'm not sure.
Very Good tutorial.
should've also covered how to add new user with POST call and then retrieve updated users from API(like switch map with RxJs)
Thanks for this deep dive into the new Angular feature. Right now, I see the mess and overhead of using the Resource feature. I want to see some consistency in its use, like with the Rxjs, where you see the stream and necessary operators. Right now, it is a very raw approach with a ton of overhead to achieve simple behavior. I'm glad that the Angular team wants to find a standardized approach for daily routine, but something goes wrong with it.
Another great explanation! Thanks!
Thanks a lot for this awesome intro to new API.
Дякую
Should debounce/throttle calls when making changes in a input for PROD code.
I understand YTer was not showing PROD ready code and experimental code.
Thanks! It is a perfect "resource" for my signals workshop 😂
:D haha, glad to help!
great explanations .. need a next video for partial hydration
Another great tutorial. Thanks
My pleasure!
great one , thank you so much
God job, great stuff!
Excelent content! Thnxz!
Great stuff, thanks! I hope Angular team will be able to provide as good experience as you can have with Tanstack Query (Angular's adapter is in experimental phase, but seems to be working fine with signals). The resource API lacks the production-grade server data caching. Maybe it could be an idea for your next video to show how to implement real-world caching mechanism with Angular?
Great video, thanks
P.S.: there is no sense to use `return await...` better just simple `return ...` instead (5:32)
Thanks a lot for this video! I have a question, what's your approach to check angular's source code? Do you open angular's source code in another window or something? I want to be able to debug it on my project too, can i do that?
thanks for this video! what if we want to add things we had in rxjs operators to the search(like debounceTime for example)?
As usually best of class
Very very useful! Thanks a lot!! 😊
Dmitro, do you plan a new commercial course using latest Angular version? Would like to see latest best practices, how the todays way looks like to handle tokens/refresh tokens by creating the corresponding app structure. I ceated several small Angular Apps but I am looking for the ideal way of solving daily problems.
I think some example applications would be great. 🙏
Thanks!
I'm wondering all these new API's how they combine with SSR.
I mean: most common use case would be to load async data based on an input signal linked to route parameter by withComponentInputBinding().
In the context of SSR so far the only practical way to ensure the data is loaded before the server sends back the html is to use a resolver function in the route config.
This means both the withComponentInputBinding() and the new resource API are useless in this scenario.
Unless Angular will wait (or is instructed to wait, I don't know how) for the data to be fetched before going stable and returning the html.
What do you think?
Hey! Thanks for this comment. I am actually not so experienced with SSR at the moment, so I can’t say anything exactly. Maybe we will see something like waitFor() likewise it is done in AnalogJS…
can you provide content on angular linting as well? thanks sir. as always great content.
Great video! Do you think naming signal dependencies as ‘request’ makes sense?
Yeah... naming could be better :) But let's see. It might change if community will suggest anything better.
Hi Dymtro,You explained the concepts of resources really well ❤ and I found your explanation amazing 🔥🔥! But I was wondering if you could clarify something about "untracked" in the resource function. Could you explain what that means?
Thanks!
Great video!. Thanks a lot. ¿Is it possible to have similar capabilities like Rxjs operators into Resource? What do you think about it?. Best regards!
I appreciate for the detailed explanation of the resource API. The only missing piece in this case is debounceTime. Will we have it without using rxjs soon? What do you think about it?
Yes, this is one of the features I also would like to see. I think we will see something similar to debounceTime but I can not say for sure. It is too early stage to say anything exactly :)
It is straightforward to implement. Inside the loader function, before returning, write
await wait(300, param.abortSignal); // param is the object that is passed in the loader function (or you can destructure it) and the wait function is something like
function wait(ms: number, abortSignal?: AbortSignal) {
return new Promise((resolve) => {
const onAbort = () => {
clearTimeout(timeoutID);
resolve(undefined);
};
const timeoutID = setTimeout(() => {
abortSignal?.removeEventListener('abort', onAbort);
resolve(undefined);
}, ms);
abortSignal?.addEventListener('abort', onAbort);
});
}
@@user-if1de8pt2j Which is? They do not understand closures to write it on their own? The general debounce function is a 5-line decorator function. Its not cryptography.
@@user-if1de8pt2j what edge cases? Name one "edge case"
idk why but that looks 4 me like smth with more boilerplate than standart approach. A way of handling that situation by simply establishing formcontrol on a serch input and then subscribing to its valuechanges with further switchmap looks much more laconic
Hey :) I think it looks more laconic until you start adding error handling, loading/reloading, reset features, etc. Once you add this, you might end up with a solution which looks more complex and has the same (or even more) lines of code :)
Hi i have a question. What if i want to use your code but extend it and be able to load that query search parameter via input - as URL query parameter - and put it in input and then be albe to work with it. what the code would look like ?
After long time Dude, Hello
Heeey 👋🏻
Can we use anything from angular signlas with resource api, which acts like rxjs operators such as distinctUntillChanged or debounceTime?
Well, something similar to distinctUntillChanged() you can achieve using the property "equal" in resource config. There it also takes a predicate function which defines if the value considered to be changed or not. If the predicate function returns true (value changed), it will notify dependant signals about the change.
Regarding the debounceTime. Unfortunately, there is no alternative for it (yet). I hope we will see something later
@DecodedFrontend thank you ❤️
Do I understand correctly that resource can now only be used for get requests, but not for post requests?
Hey! No, ResourceAPI works with any Promise-Based async operations. In the video, the HTTP calls (GET call in particular) was used as an example but it doesn't mean that resource should be used only with HTTP calls or only with a specific http call type.
Awesome, similar to TanStack Query
Yep :)
With the new signal API we no longer need reactive forms. What's your opinion on that?
I also hear about an rxResource function, is it happening or a its a myth? I mean we could use something to handle pipes like debouncing and maps when loading these resources
rxResource is the same as Resource but it works with observables (while resource works only with Promises)
@@DecodedFrontend If you can do a demo of the rxResource in the next video it will be a huge plus to the community :)
()=>this.query() function does not return a signal, but rather a signal's value.
Still even boiling my head over this, does the loader only work with promises only or it can with rxJS obeservables?
The resource api works with Promises. To work with observers there is a rxResource. It works almost the same way as Resource but instead Promise the loader should return observable
@@DecodedFrontendThank you very much
one vide one all about hydration please.
Subscribing to the Dmytro's channel from all the accounts I have ))))
I hope you have a few thousands accounts to finally reach 60K :D
Tnx bro
You’re welcome!
awesome
🙌🏻
Next step would be a mutation signal 😊
Hahaha. Yes bro
only thing missing is some throttling, not to make too many reuests
I really don't like this one. For me it's like Angular is coming to react side of force with this thing. I like Angular because it has separation of concerns and with this resource people will start to do this instead of use a service for example.
Agree, i think writable signal and computed are enough. Linked signal and resource are unnecessary complications. Hope they are going to be removed in v20
My fear is that AI will throw everything away..
I don’t think it will happen any time soon 😁
This whole video was generated by an AI 😮
😂@@dimitridovgan6364
@@dimitridovgan6364 🥲
ok ok angular wins
Custom abortion logic 😂