Use @Input to Read Angular Route Parameters

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ธ.ค. 2024

ความคิดเห็น • 72

  • @skayona
    @skayona ปีที่แล้ว +6

    Debora, thanks a lot! I wish I could explain things as you do. Thanks for doing such amazing videos!

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      That is kind of you to say. Glad you like them!

  • @danielabonvini
    @danielabonvini ปีที่แล้ว +6

    Amazing video as always, I especially liked the little addition of the explanation about deep linking

  • @ankitmvp
    @ankitmvp 4 หลายเดือนก่อน +1

    Thanks a lot for this ... Really loved the way you explain the concepts ... Just wow !!! 🤩

    • @deborah_kurata
      @deborah_kurata  4 หลายเดือนก่อน

      So nice of you to say. Thank you! 😊

  • @Nabulio85
    @Nabulio85 ปีที่แล้ว +1

    Thank you !
    Very good job, your channel deserves more subscribers

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      Thank you for watching!
      And yes! 😊

  • @shubhambahre9021
    @shubhambahre9021 5 หลายเดือนก่อน

    I simply loved this explanation

  • @haroldpepete
    @haroldpepete ปีที่แล้ว +1

    great explanation, angular looks easy when you explain it

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      That is kind of you to say! Thanks! 😊

  • @joeyvico
    @joeyvico ปีที่แล้ว

    Wonderful!! I always thought that the snapshot.params way was too clunky. Thanks again Deborah. Amazing teaching

  • @advance5189
    @advance5189 5 หลายเดือนก่อน

    Just wanna say that your tutorials are on point🔥.Thanks for the great content!

  • @robertkameni5975
    @robertkameni5975 ปีที่แล้ว

    I love your stuff. Really great Job Deborah🔥

  • @_dinesh
    @_dinesh ปีที่แล้ว

    amazing tips! thank you so much. 💕

  • @anatoliiborkivski
    @anatoliiborkivski 3 หลายเดือนก่อน +1

    This is cool video, but I don't like that there is no way to explicitly tell that this is not input but route params, wouldn't it be much better to implement this feature with separate decorator like @RouteParam() or add additional property to input decorator object (for example routeParam) like we have with required, transform and alias

  • @AntonioRibeiro-qs3fy
    @AntonioRibeiro-qs3fy 5 หลายเดือนก่อน

    very nifty and handy....thank you

    • @deborah_kurata
      @deborah_kurata  5 หลายเดือนก่อน +1

      Great to hear it was useful!

  • @adnanrazapk1
    @adnanrazapk1 ปีที่แล้ว

    simple to the point explanation, recently subscribe and loved your content. 🔥

  • @franckozeusmakita7022
    @franckozeusmakita7022 ปีที่แล้ว

    amazing Job. thanks you from Germany!

  • @yelose85
    @yelose85 11 หลายเดือนก่อน

    Thank you very much!😄

    • @deborah_kurata
      @deborah_kurata  11 หลายเดือนก่อน

      You're welcome 😊

  • @lqt74
    @lqt74 ปีที่แล้ว

    Great! Thank you!

  • @KYO-wb9dg
    @KYO-wb9dg ปีที่แล้ว

    Great video! Just little bit curious, is it better to use Resolver to reload data?

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      Thank you.
      The down side of a resolver is that it blocks the navigation until the data is resolved. This has more info: angular.schule/blog/2019-07-resolvers

  • @ranjanadeore2957
    @ranjanadeore2957 ปีที่แล้ว

    Great thank you mam providing great content 🙂

  • @rd_45
    @rd_45 ปีที่แล้ว

    Amazing feature

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      Yes! I've been using it regularly now for my route parameters.

  •  ปีที่แล้ว

    Hi Deborah, tanks for the video, does exist any difference from Input Binding for parameters and input binding for communication between components?

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      I'm not sure I understand the context of the question. A difference in what way?

  • @PixelFlowers
    @PixelFlowers ปีที่แล้ว

    Thank you 🎉

  • @test-user-123
    @test-user-123 ปีที่แล้ว

    Cool!

  • @TheZukkino
    @TheZukkino ปีที่แล้ว

    Thanks for the explaination.
    Could you please make a video concerning form management with @Input and Signals? I've noticed that signals and forms do not fit well, mostly if the signal must be used to fullfill the form and the same data must be used to perform a submit.

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      Glad it was useful!
      The signals features are not yet complete, including using them with @Input, with two-way binding, and with forms. These are features the team is still working on.
      I'll be sure to do some videos as soon as those features are available.

  • @scellilisa
    @scellilisa ปีที่แล้ว

    Nice Explanations like always thanks!!!
    still have a small question:
    i have for example a search input above the product details, where i can look directly for ids of products.
    Imagine i looked at product 5 at first load from the component, so id:5 is in the url. but then i want to see product 10. i write 10 in my input field, on submit i load right product, but writing new id in the url did not happened.
    is there a new way to update that parameter? or do i need to continue injecting the router and replace more or less with navigateByUrl? hope you have an alternative way ^^ thx
    thank you for your help

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      Thank you!
      I *think* I understand what you are asking? Any way you could create a little Stackblitz example?

    • @scellilisa
      @scellilisa ปีที่แล้ว

      @@deborah_kurata seems like everytime i post the stackblitz link, my comment is removed.... where can i send it to you? thanks

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      My apologies ... I didn't see your reply until now. What social media are you on? You can send it via one of those if you're still interested.

  • @peter2967
    @peter2967 ปีที่แล้ว

    7:07 Can you use input transform instead of casting to a Number? Like so:
    @Input({ transform: numberAttribute }) id = '';

    • @EmilioDegiovanni
      @EmilioDegiovanni ปีที่แล้ว

      It's a function. @Input({transform: (id) => Number(id)}) id = 0;

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +2

      Yes! And it looks like @EmilioDegiovanni provided the syntax below. (I was planning on covering that in a separate, upcoming video. :-))

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      Thank you for providing the correct syntax!

    • @peter2967
      @peter2967 ปีที่แล้ว +3

      @@deborah_kurata Angular 16.1 actually exposes numberAttribute and booleanAttribute coercion functions to handle this

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      Yep, you are correct. I hadn't seen the new `numberAttribute` and `booleanAttribute` when I did this video. I've since put all of the above in this video: th-cam.com/video/5_YZVF0OAu0/w-d-xo.html
      Thank you!

  • @MirceaAgrigoroaie
    @MirceaAgrigoroaie ปีที่แล้ว

    If the id is not specified in the route can we use the Input to read the url param.. for example ?id=2&name=something . Will angular know to map these to id and name inputs automatically?

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      I'm on pto this week. I'll try it when I get back to the office.

  • @MultiWarrr
    @MultiWarrr ปีที่แล้ว

    can i access parent route params by this approach

  • @davidkooffreh4752
    @davidkooffreh4752 4 หลายเดือนก่อน

    Would this work in a route resolver

  • @metalllus
    @metalllus 3 หลายเดือนก่อน

    is it possible to do the same with the new signal input function?

    • @deborah_kurata
      @deborah_kurata  3 หลายเดือนก่อน

      Yes, it should work. Are you having issues getting it to work?

  • @jeffnikelson5824
    @jeffnikelson5824 ปีที่แล้ว +1

    We love your videos deborah ❤️ but please try to come to the point faster. this video could be 3 min long and still explain the new content in detail

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      Thank you for the feedback. Yeah, I contemplated whether I should cover the "how routing works" to clarify how/where these parameters are set. Maybe that should have been its own video so the majority that already know that could skip that part?

    • @ErickCcsVzla
      @ErickCcsVzla ปีที่แล้ว +4

      @@deborah_kurata To be honest, we already have a lot of TH-cam channels explaining everything really fast. I like that Deborah explains slowly and takes time to speak about small important details like in this video. But, we know how it is, it's impossible to please everybody.

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว

      @@ErickCcsVzla Thank you! 😊😊

  • @RaghavendraKarteek
    @RaghavendraKarteek 3 หลายเดือนก่อน

    can u share the code please

    • @deborah_kurata
      @deborah_kurata  3 หลายเดือนก่อน

      You can find it here: github.com/DeborahK/Angular-TH-cam/tree/main/input-route-parameters

  • @baldin13
    @baldin13 11 หลายเดือนก่อน

    awesome video! Watched from freecode and again here on yt, if I could hit the like button 1000 times I would, tks a lot!

  • @mihailion2468
    @mihailion2468 ปีที่แล้ว +1

    Oh my lord light theme

    • @deborah_kurata
      @deborah_kurata  ปีที่แล้ว +1

      Out of curiosity ... is this comment because you personally use dark and this doesn't? Or is it because it is really too hard to read/see with the light theme?
      I ask because I know most developers use dark. But we've been told by most conferences and companies such as Pluralsight to always use light when recording videos because they are easier to see ... especially on smaller devices.
      Thanks!

    • @mihailion2468
      @mihailion2468 ปีที่แล้ว +2

      @@deborah_kurata Hey deborah, your video was insightful, I didn't mean to disrespect. For me, it's mainly personal, I use dark themes everywhere. But it is also an issue if I'm scrolling at 11 or 12 PM through TH-cam, and the video makes my eyes bleed. Kind of hard to watch as you said. Cheers