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

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ •

  • @DecodedFrontend
    @DecodedFrontend  Місяць тому +4

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

  • @yufgyug3735
    @yufgyug3735 Місяць тому +22

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

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому +3

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

  • @GLawSomnia
    @GLawSomnia Місяць тому +15

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

  • @innocentmazando3808
    @innocentmazando3808 Місяць тому +7

    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

  • @HackHeyner
    @HackHeyner Місяць тому +6

    This guy is the MVP!

  • @gagiksimonyan3782
    @gagiksimonyan3782 Місяць тому +3

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

  • @pavelernestonavarroguerrer7871
    @pavelernestonavarroguerrer7871 24 дні тому

    I really appreciate your videos and I admire the way how you try to understand the framework analyzing the source code. Thanks a lot!

  • @doviletumaite492
    @doviletumaite492 Місяць тому +5

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

  • @PauloSantos-yu1tn
    @PauloSantos-yu1tn Місяць тому +11

    What about debounceTime() on query signal?

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому +2

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

    • @PauloSantos-yu1tn
      @PauloSantos-yu1tn Місяць тому +2

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

    • @antoxa5315
      @antoxa5315 29 днів тому

      It might be possible to simply wrap the loader function in a debounce from lodash, but I'm not sure.

  • @SurajYadav-tr1bn
    @SurajYadav-tr1bn Місяць тому +1

    Pleasure to have a such great Angular lover ❤

  • @wertstein
    @wertstein 25 днів тому

    Thanks a lot for this awesome intro to new API.
    Дякую

  • @oleksandrvorovchenko8674
    @oleksandrvorovchenko8674 14 днів тому

    Another great explanation! Thanks!

  • @evgeniysushilnikov9277
    @evgeniysushilnikov9277 17 днів тому

    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.

  • @bhargavrg3094
    @bhargavrg3094 29 днів тому

    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)

  • @dimitridovgan6364
    @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. 🙏

  • @adriantworek1057
    @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?

  • @chagamajaykumarreddy1897
    @chagamajaykumarreddy1897 Місяць тому +1

    great one , thank you so much

  • @v1nc3n2o.
    @v1nc3n2o. Місяць тому +1

    Another great tutorial. Thanks

  • @aayushkc2306
    @aayushkc2306 29 днів тому

    great explanations .. need a next video for partial hydration

  • @deatho0ne587
    @deatho0ne587 22 дні тому +1

    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.

  • @CaptM44
    @CaptM44 Місяць тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому

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

  • @lindermannla
    @lindermannla Місяць тому +1

    Excelent content! Thnxz!

  • @OrAnaki-x4j
    @OrAnaki-x4j 24 дні тому

    thanks for this video! what if we want to add things we had in rxjs operators to the search(like debounceTime for example)?

  • @abuzar-o9m
    @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!

  • @danywalls
    @danywalls Місяць тому +2

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

  • @amirhosseinrastegar8144
    @amirhosseinrastegar8144 Місяць тому

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

  • @pdela72
    @pdela72 Місяць тому +1

    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
      @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…

  • @Billiam112
    @Billiam112 25 днів тому

    God job, great stuff!

  • @dogandipcin
    @dogandipcin Місяць тому +1

    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
      @DecodedFrontend  Місяць тому +2

      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
      @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);
      });
      }

    • @KostasOreopoulos
      @KostasOreopoulos 24 дні тому

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

    • @KostasOreopoulos
      @KostasOreopoulos 24 дні тому

      @@user-if1de8pt2j what edge cases? Name one "edge case"

  • @enverusta7811
    @enverusta7811 21 день тому

    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?

  • @nelson3391
    @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!

  • @hobbytsworld
    @hobbytsworld Місяць тому

    As usually best of class

  • @MimBooo1
    @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 ?

  • @tornikeen
    @tornikeen Місяць тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому +1

      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
      @tornikeen Місяць тому

      @DecodedFrontend thank you ❤️

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

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

  • @noormohammedshikalgar
    @noormohammedshikalgar Місяць тому +1

    After long time Dude, Hello

  • @innocentmazando3808
    @innocentmazando3808 Місяць тому +1

    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
      @DecodedFrontend  Місяць тому +1

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

    • @innocentmazando3808
      @innocentmazando3808 Місяць тому +1

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

  • @03mylol
    @03mylol Місяць тому +2

    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
      @DecodedFrontend  Місяць тому +3

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

  • @TheReallamos
    @TheReallamos 13 днів тому +1

    Do I understand correctly that resource can now only be used for get requests, but not for post requests?

    • @DecodedFrontend
      @DecodedFrontend  13 днів тому +2

      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.

  • @oleksii_biliachenko
    @oleksii_biliachenko Місяць тому +1

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

  • @chiboutinabil473
    @chiboutinabil473 Місяць тому +1

    Tnx bro

  • @rgunczer
    @rgunczer Місяць тому +1

    Awesome, similar to TanStack Query

  • @innocentmazando3808
    @innocentmazando3808 Місяць тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому +1

      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
      @innocentmazando3808 Місяць тому

      ​@@DecodedFrontendThank you very much

  • @manojv2893
    @manojv2893 29 днів тому

    With the new signal API we no longer need reactive forms. What's your opinion on that?

  • @duganets
    @duganets Місяць тому +1

    awesome

  • @Юлия-т5н5е
    @Юлия-т5н5е Місяць тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  Місяць тому

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

  • @shubhamgoel7703
    @shubhamgoel7703 9 днів тому

    one vide one all about hydration please.

  • @serhiikolontaievskyi
    @serhiikolontaievskyi Місяць тому +1

    Next step would be a mutation signal 😊

  • @ChaimMosheStern
    @ChaimMosheStern 26 днів тому

    only thing missing is some throttling, not to make too many reuests

  • @IcaroFelix2023
    @IcaroFelix2023 Місяць тому +2

    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.

    • @daniel49245
      @daniel49245 28 днів тому

      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

  • @h__n1092
    @h__n1092 Місяць тому +1

    My fear is that AI will throw everything away..

  • @esquilo_atomico
    @esquilo_atomico 11 днів тому

    ok ok angular wins

  • @alirahmani5601
    @alirahmani5601 Місяць тому

    Custom abortion logic 😂