Angular Resource API - Everything You Have To Know (so far)

[@DecodedFrontend]

🔥 Advanced Angular Courses - bit.ly/df-courses Get Courses Now With -25% off during the Black Friday Sale!

[@yufgyug3735]

i really like how angular is evolving. standalone components, simpler reactivity options, easier backend integrations. good stuff

[@DecodedFrontend]

Yes, I also quite impressed by new features and how signals are being adopted :)

[@GLawSomnia]

My favorite Angular youtuber posted a video 🥳🥳🥳🥳🥳🥳 Its always a pleasure learning from you

[@DecodedFrontend]

Thank you! Enjoy 😊

[@innocentmazando3808]

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

[@DecodedFrontend]

Thank you! Glad you like it :)

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro) Just watched Angular 19 release and hope you will explain to us all new features in details))

[@DecodedFrontend]

You are welcome! More to come 🙌🏻

[@doviletumaite492]

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

[@usernr546]

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! :)

[@HackHeyner]

This guy is the MVP!

[@PauloSantos-yu1tn]

What about debounceTime() on query signal?

[@DecodedFrontend]

There is no alternative to it. However, I hope later we will see something similar ;)

[@PauloSantos-yu1tn]

@@DecodedFrontend this API looks cool but I can imagine people doing tones of s*** on it. Signals are cool but rxjs are powerful.

[@danywalls]

Thanks! It is a perfect "resource" for my signals workshop 😂

[@DecodedFrontend]

:D haha, glad to help!

[@dimitridovgan6364]

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

[@amirhosseinrastegar8144]

can you provide content on angular linting as well? thanks sir. as always great content.

[@CaptM44]

Great video! Do you think naming signal dependencies as ‘request’ makes sense?

[@DecodedFrontend]

Yeah... naming could be better :) But let's see. It might change if community will suggest anything better.

[@SurajYadav-tr1bn]

Pleasure to have a such great Angular lover ❤

[@dogandipcin]

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?

[@DecodedFrontend]

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 :)

[@KostasOreopoulos]

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]

​@@KostasOreopoulosTheres a good reason people use *denounce* and/or *throttle* rather than writing their own utilities 😊

[@adriantworek1057]

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?

[@nelson3391]

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!

[@abuzar-o9m]

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!

[@oleksii_biliachenko]

()=>this.query() function does not return a signal, but rather a signal's value.

[@chagamajaykumarreddy1897]

great one , thank you so much

[@v1nc3n2o.]

Another great tutorial. Thanks

[@DecodedFrontend]

My pleasure!

[@pdela72]

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?

[@DecodedFrontend]

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…

[@lindermannla]

Excelent content! Thnxz!

[@hobbytsworld]

As usually best of class

[@03mylol]

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

[@DecodedFrontend]

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 :)

[@rgunczer]

Awesome, similar to TanStack Query

[@DecodedFrontend]

Yep :)

[@noormohammedshikalgar]

After long time Dude, Hello

[@DecodedFrontend]

Heeey 👋🏻

[@АлександрБобырь-л6ъ]

Great video, thanks P.S.: there is no sense to use `return await...` better just simple `return ...` instead (5:32)

[@user-if1de8pt2j]

Since *users.json()* returns a promise would you not need to await it?

[@serhiikolontaievskyi]

Next step would be a mutation signal 😊

[@chiboutinabil473]

Tnx bro

[@DecodedFrontend]

You’re welcome!

[@tornikeen]

Can we use anything from angular signlas with resource api, which acts like rxjs operators such as distinctUntillChanged or debounceTime?

[@DecodedFrontend]

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

[@tornikeen]

@DecodedFrontend thank you ❤️

[@Юлия-т5н5е]

Subscribing to the Dmytro's channel from all the accounts I have ))))

[@DecodedFrontend]

I hope you have a few thousands accounts to finally reach 60K :D

[@MimBooo1]

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 ?

[@user-if1de8pt2j]

Am I right in thinking that *resource* won't work with Angular mock server/proxy and interceptors? Also if the user left the page would the API call get cancelled - like it would if using *takeUntil* with HttpClient

[@DecodedFrontend]

That functionality you mentioned isn't the responsibility of Resource but rather of the HttpClient, and their responsibility doesn't overlap. You can combine them together, but since HttpClient supports only observables at the moment, you would probably want to use resource (), which works the same as resource() in the video, but it works with observables instead of promises.

[@Yehor-l1j]

You could try with axios instead of fetch. It would allow you to provide interceptors of axios.

[@user-if1de8pt2j]

@@Yehor-l1j resourceRx uses HttpClient, so that will work

[@innocentmazando3808]

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

[@DecodedFrontend]

rxResource is the same as Resource but it works with observables (while resource works only with Promises)

[@innocentmazando3808]

@@DecodedFrontend If you can do a demo of the rxResource in the next video it will be a huge plus to the community :)

[@innocentmazando3808]

Still even boiling my head over this, does the loader only work with promises only or it can with rxJS obeservables?

[@DecodedFrontend]

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

[@innocentmazando3808]

​@@DecodedFrontendThank you very much

[@duganets]

awesome

[@DecodedFrontend]

🙌🏻

[@IcaroFelix2023]

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.

[@h__n1092]

My fear is that AI will throw everything away..

[@DecodedFrontend]

I don’t think it will happen any time soon 😁

[@dimitridovgan6364]

This whole video was generated by an AI 😮

[@h__n1092]

😂​@@dimitridovgan6364

[@DecodedFrontend]

@@dimitridovgan6364 🥲

[@alirahmani5601]

Custom abortion logic 😂