How to Share Data Between Components in Angular | Passing Data From One Component to Another

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ต.ค. 2024
  • In this video, I have covered different methods for sharing data between Angular components. I have covered three cases:
    Case 1: Parent to Child: via Input
    Case 2: Child to Parent: via Output() and EventEmitter
    Case 3: Unrelated Components: via a Service
    Subscribe to this channel: / @thegoodcode
    Check Out My other videos as well:
    Create Animated Particles Background In Angular 8 (2020) | Angular-particle Library | Particles.js - • How To Create Animated...
    Animated Circular Progress Bar Graph In Angular (2020) | Circular Percentage Chart | For Beginners - • How To Create Animated...
    First Angular-9 Application in Two minutes (2020) | Installing NodeJS | Installing Angular-CLI - • How To Create First An...
    SEO stuff :
    angular 9 component communication ,angular 9 parent-child communication ,angular 9 nested component communication ,angular 9 route parameters ,angular 9 input properties ,angular 9 template reference variable ,angular 9 required route parameters ,angular 9,optional route parameters ,angular 9 query params ,angular 9 sharing data between components ,angular 9 output property ,angular 9 component interaction ,angular ,angular 9 ,angular 9 ,webdev ,app development ,typescript ,javascript ,lesson ,tutorial ,data sharing ,service injection ,

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

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

    guys dont judge the video by view its really excellent tutorial

    • @TheGoodCode
      @TheGoodCode  4 ปีที่แล้ว

      Glad you liked it!

    • @Shreekrushna2001
      @Shreekrushna2001 2 ปีที่แล้ว

      Excellent videos can not get good views because its true videos

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

    I watched 4-6 videos of this sibling data sharing. None of them work, but your video did it. You got one more subscriber

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

    Thank you, don't give it up! Keep going and share new, helpful tutorials!!!

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

    Helped me in implementing a feature in my job at a startup, Thanks a ton!

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

      Tumhaare liye hi toh banaya hai video! Glad it helped 😁😁

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

    Thank you so much for sharing the knowledge in the simplest form ever!

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

    Thank you so much for your easy, lovely and clear explanations.

  • @kumaravela6008
    @kumaravela6008 3 ปีที่แล้ว

    In using the service, Why when getting the data from input field not working. The data is setting successfully but the data is not getting

  • @hamzarauf320
    @hamzarauf320 2 ปีที่แล้ว

    Thank you soo Much For choosing sooo Much Easy way

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

    Bro Video is so good But why music is there is background it distracting focus...

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

      Music is there to hide my background noise!😜 Since I don't have a studio or anything 🙈 sorry about the distraction though!

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

    Very helpful video, thanks much! Hope you make more videos in the future!

  • @tester6821
    @tester6821 2 ปีที่แล้ว

    🙌🙌🙌 bro you are hero for me life saver thank you so much ❤️

  • @Krizz23.
    @Krizz23. 3 ปีที่แล้ว +1

    I have a table.
    When you press a button of a row in it, a dialog opens (pop-up), in it there is a form
    .
    I need that when the dialog opens, the information that is in the table is loaded into it.
    So I need to export the object of that row to the dialog and when closing the dialog that object is updated in the table
    .
    I couldn't import the row object to the dialog component from the table component
    Could you help me?
    I'm using this ¿Library? [ng.ant.design/docs/introduce/en] and Angular v10.0.8

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

    Hi bro , please cover all the topics in angular...Just liked the way of teaching , its simple and efficient..Expecting more contents...Thanks in advance :)

    • @TheGoodCode
      @TheGoodCode  3 ปีที่แล้ว

      I am glad you liked the tutorial!! Appreciate your feedback! Thank you 😊

    • @DINESHKUMAR-yq5gr
      @DINESHKUMAR-yq5gr 2 ปีที่แล้ว

      @@TheGoodCode yes, I am also expecting single video for full angular concept

    • @DINESHKUMAR-yq5gr
      @DINESHKUMAR-yq5gr 2 ปีที่แล้ว

      @@TheGoodCode how to resolve CORS issue in angular and API side?

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

    Great explanation

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

    Awsome explanation🎉
    Keep posting videos like this..💣

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

    CONCISE! TO THE POINT! GREAT EXPLAINATION!

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

    THANK YOU SO MUCH! It helped a lot!

  • @dheerajpaladi7041
    @dheerajpaladi7041 3 ปีที่แล้ว

    when i passed data from one component to another component via a service it is not showing any error but i am not getting data.May i know what could be reason .

    • @TheGoodCode
      @TheGoodCode  3 ปีที่แล้ว

      Try following the exact steps mentioned and check

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

    thankks bro

  • @kpopisbop6651
    @kpopisbop6651 2 ปีที่แล้ว

    What if there is no child selector? What if we are using routing for accessing child? Then how to share data from child to parent?

  • @kartikeyasingh2798
    @kartikeyasingh2798 2 ปีที่แล้ว

    nice explanation

  • @sabitaojha8032
    @sabitaojha8032 2 ปีที่แล้ว

    getmessage() is asking for agrument when we call it from component 2. please reply

    • @TheGoodCode
      @TheGoodCode  2 ปีที่แล้ว

      Try following step by step from the tutorial, it should work

  • @humbertoestrada4215
    @humbertoestrada4215 3 ปีที่แล้ว

    And if I want to get the value from a Python file ?

  • @hamzarauf320
    @hamzarauf320 2 ปีที่แล้ว

    Bundle of Thanks😍

  • @dilpreetkaur813
    @dilpreetkaur813 10 หลายเดือนก่อน

    Thank you

  • @sidduhedaginal
    @sidduhedaginal 3 ปีที่แล้ว

    very helpful information, thanks for sharing knowledge.

  • @shutter_buggies
    @shutter_buggies 2 ปีที่แล้ว

    thank you so much

  • @abhishekdas1342
    @abhishekdas1342 3 ปีที่แล้ว

    Can we pass any object instead of string with @Input

  • @samiksha7937
    @samiksha7937 2 ปีที่แล้ว

    Nice and helpful video.

  • @Akash-di5tb
    @Akash-di5tb 2 ปีที่แล้ว

    I'm trying to send data from one child component to another child component , when I refresh another child where i passed data, I don't know, Why does the data go away?

    • @TheGoodCode
      @TheGoodCode  2 ปีที่แล้ว

      Browser refresh?

    • @Akash-di5tb
      @Akash-di5tb 2 ปีที่แล้ว

      @@TheGoodCode yes

    • @Akash-di5tb
      @Akash-di5tb 2 ปีที่แล้ว

      @@TheGoodCode refresh browser when I'm in the child component

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

      The only way to save data on browser refresh is to save it in cookies or local storage or API calls

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

    at 3:14 What is the meaning of $event?

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

      $event is the default JS event. It's passed to a function in the ts file and then used there.

  •  4 ปีที่แล้ว +2

    Good tutorial

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

    Background music is disturbing! Went to look for another video.

    • @TheGoodCode
      @TheGoodCode  3 ปีที่แล้ว

      Thanks for the feedback 🙌🏻

  • @harshilshah4677
    @harshilshah4677 2 ปีที่แล้ว

    where are you, need more videos!!!!!!

  • @TonyStark-qo5lz
    @TonyStark-qo5lz 2 ปีที่แล้ว

    Awesome

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

    could you remove background music , this is disturbing to concentrate

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

    why the background music brother. its totally distracting

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

    Very nice

  • @pritammalwade8674
    @pritammalwade8674 2 ปีที่แล้ว

    Your content is very good but Please don't add background music . Its bit annoying.

  • @iroshanaravishan1388
    @iroshanaravishan1388 2 ปีที่แล้ว

    Wow it works..👏🙌🤩

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

      Ofcourse it works 😂😂

  • @chayanikachaudhury7219
    @chayanikachaudhury7219 3 ปีที่แล้ว

    Oh god helped me a lot ❤️

  • @paolotiboni9906
    @paolotiboni9906 2 ปีที่แล้ว

    music too loud man, it s dusturbing me while i focus on your voice, ervything else really great !

  • @ashiqdey
    @ashiqdey 2 ปีที่แล้ว

    Good content bro, keep uploading

  • @aravindhsri1770
    @aravindhsri1770 3 ปีที่แล้ว

    thanks bro...

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

    use some animation and bit slow

  • @yuriinadilnyi3029
    @yuriinadilnyi3029 3 ปีที่แล้ว

    the best!

    • @TheGoodCode
      @TheGoodCode  3 ปีที่แล้ว

      Thanks a lot!! Please subscribe

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

    Background music is noisy. Why every youtuber adds background music at full volume? Test yourself by using earphone

  • @tester6821
    @tester6821 2 ปีที่แล้ว

    🙌❤️

  • @jayakumar2927
    @jayakumar2927 4 ปีที่แล้ว

    Share the code

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

    Background Music is so annoying.

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

    pls remove the background music next time... its irritating

  • @rajmulherkar6894
    @rajmulherkar6894 2 ปีที่แล้ว

    Please stop putting the background music on... it sounds so bad lmao

  • @osamamalik3290
    @osamamalik3290 2 ปีที่แล้ว

    Thank you

  • @maheshkarpenter7616
    @maheshkarpenter7616 2 ปีที่แล้ว

    thank u so much

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

    Thanks you