Sharing Data between Components in Angular

[@zlatanonkovic2424]

0:07 parent => child - via Input() 0:42 child => parent - via Output() + EventEmitter 2:12 child => parent - via ViewChild() 3:01 Any => Any - via a shared service Thanks a lot for that great video!

[@tariqboukouyen4841]

Useful YO

[@DividedStates]

awesome quick reference

[@sivakumarg98]

😂 🤟🙏

[@davidj5284]

It is a shame the content creator didn't think to do this. This is what makes great content. Indexing the f*ing thing.

[@avinashsuresh5221]

2:12 is really for parent to access its child(ren).

[@squarebynature]

Best short, concise and to the point video on the internet about data cross communication in Angular, period. Thanks so much !!!

[@Fireship]

Thank you! Let me know if there are any other Angular topics you want to see on the channel.

[@squarebynature]

more on observables inside Angular would be awesome!

[@umka7873]

need urgent explanation errorHandler!)) new Ng 6+

[@beginner2expert]

You can try this example as well: kzbin.info/www/bejne/b2bYnax8iJWYgtE

[@MaDaaBre]

The best explanation I've seen for Angular. Helped me finally understand cross component communication once for all! Thank you!

[@Fireship]

thank you!

[@silaslumba8111]

Body painting

[@tayfoooooor]

Yup exactly all in one, simple explanation (Y)

[@Legotron]

Bank5z0rSqt absolutely it is! I had that AH-HA moment.

[@MaylorTaylor]

I agree with this comment.

[@stevenskharisachaesquerre5080]

it's been 6 years and it's still helpful, thx for doing this

[@elisolna]

This is by far the *BEST EXPLANATION* about data sharing in angular, i'v seen a lot of videos about it, but no one explains it as simple and straightforward like you, Keep Up the good work mate!

[@Fireship]

Thank you!

[@ibknl1986]

One of the best training way. Not sure how but your voice + training video + methodology make it super clear. Great going

[@davesharp5472]

This channel in general has been the most helpful thing for me learning angular compared to anything else. I'll watch the same video 5 times to get all the info since there's no much packed in there but its clear and concise. Thank you for doing this.

[@phuduc1193]

I rarely comment anywhere but this is amazing.. fast, short, easy to understand and just on point. Thank you so much.

[@Fireship]

Thank you, I appreciate that!

[@QuentinMayo]

Several years later, I'm still watching your videos. GreatjJob at summarising concepts! They really help remind me of concepts I forget

[@hussain5755]

explaining is an art and this guy is the picasso of that art..kudos

[@Fireship]

Thank you! Hope to make more videos like this soon.

[@patrickrossello9907]

Two minutes to explain to me what I had been researching for hours. Cheers man

[@abduljabbarazam943]

I've spent many hours looking for cross component communication in the angular docs. Giving up on that and using google I came across this video. I now understand it. Thank you.

[@avinashsuresh5221]

My preferred application architecture: 1. Global Context 2. Private Components 3. Shared services 4. Component interaction only through shared services 5. Shared services managed through one global context manager.

[@jyothijyo7599]

The simple and best tutorial on components communication.

[@omri620]

This is GOLD, Your explanation is so straight forward and simple.

[@nodarii]

the secret of good video is in background music. Chill out and relax with so technical stuff :) Good job

[@Fireship]

+Nodarii Thank you! I have had mixed reviews about the music, so glad to hear you enjoy it.

[@ibrahimmohammed3484]

i like listening to it too while he is coding xD

[@scyyyy]

can you ID the background music it for me? I know it's a pretty short loop but anyways, sounds like amazing chill out I could listen to all day :D

[@dumindudesilva083]

I'm with Nodarii too. It's cool...

[@diegomen]

@@Fireship Very good explanation and the music for programming is great. What is the name of the artist and song? give some credit :)

[@stefanoslalic2199]

Never stop what you are doing, you are genius

[@legitimoth]

Your video was one of the best video that i have ever seen. Background sound, voice quality, direct to the point.. everything perfect dude.

[@abhimalvekr127]

Best component interaction video I found on KZbin. BGM is also on point. Kudos!

[@saoudiwalid]

Short and straight to the subject, I loved it.

[@johnragica1723]

Thanks! The information in this video tutorial are very important to me as a newbee in angular. Liked and subscribed.

[@jordantaylor8549]

Wow amazing, very clear and you even put a quick step by step summary in the description . Also really like how u show the function of what you're about to make at the start of each video . Thank you for uploading ! I really appreciate the time and effort put into each of your videos .

[@Fireship]

+Jordan Thank you! Appreciate the feedback.

[@JorgeAPMota]

Definitely the best video on Angular communication between components I've seen, and better than that: concise! I've paid for much worst on learning platforms! Will pay more attention on your content! Thank you so much!

[@DemonGolota]

Really good explanation, short, direct to subject and using an example of the function.

[@rayav1065]

This video really helped me a lot! Really like the last architecture with the service and observables!

[@jonatacardoso6439]

BEST EXPLANATION about data sharing in angular!!

[@Luis-ww5fl]

Very well explained! watched a lot of tutorials but none made it as simple as you did

[@brandoncluff6696]

This was great - the first time that Angular made sense to me. Thank you!

[@isakgranqvist9306]

Great tutorial. The last example was exactly what I was looking for. Awesome!

[@lertis_m]

Where is this video was before?? It is the most concise and informative video about the passing data between components in Angular, LIKE 😍

[@mual77]

Thank you for this short, simple and straight to the point explanation.

[@erwinmesi]

Have just decided to watch all your videos from the beginning

[@Fireship]

Thank you for the feedback :)

[@glacial_chinchilla]

This got me through a problem I've been tackling for two days. Big thanks!

[@architadesai7876]

Thank you so much for this explanation. Yours is the best channel on Angular!

[@asifkarimbherani6386]

Best video on angular so far, Concise and to the point!! Thank You

[@Fireship]

Thank you!

[@neroprox]

For all using angular 5. Remember to import the DataService and set is as a provider in your module. like this: ...... import { DataService} from './data-service'; @NgModule({ declarations: [ AppComponent, ConversationComponent, CanvasComponent ], imports: [ BrowserModule, FormsModule ], providers: [DataService], bootstrap: [AppComponent] })

[@dadandgirls7306]

Thanks, that's the piece I was missing. Note that in my case, the import was slightly different than what you show: import { DataService} from './data.service';

[@prasadchaugule]

This is what exactly I was looking for. Very nicely explained. Thanks!

[@sudarshanadayananda709]

Best Angular tutorial Which teach more in short time....Thanks

[@heenachoudhary9091]

Simple and short explanation of the concept.. Thankyou for making such a informative video.

[@HusseyCarl]

You should really consider a doing course on angular basics, paid even. - I think your explanations are great and this was very easy to understand. I have watched this a few times now when I get stuck looking for the best way to communicate. I also like the music :)

[@Fireship]

Thanks for the feedback! I am actually working on an end-to-end course that should be ready in 2 to 3 weeks from now, so stay tuned for that.

[@saikiranmarripati7743]

@@Fireship is the course ready yet?

[@gauravlal9800]

Wow... what a clear and straight-forward information.... one of the excellent video over web... Excellent work! Thanks for sharing... :)

[@TerjeNesthus]

This is really cool, just what I would need to update my navbar component to indicate changes done in another component.. thanks for making this

[@RafaelFerreira182]

Is it a good approach to do unsubscribe in ngOnDestroy of all components that are doing subscribe to get the current message?

[@brianfabrizio4676]

Absolutely stellar video. Literally saved me from the design corner I had seemingly backed myself into.

[@eliasrodas7336]

Awesome video!! Really helped me understand what I was missing! Thank you very much!!

[@sumangeorge7]

one of the best videos on data sharing... it took me around an hour to implement everything and test though :)

[@ITBackup-ob5td]

The best tutorial i have seen about this topic. Thanks.

[@mgs_4k198]

Simplicity is a beautiful thing. Thank you

[@nzjemountfort]

Finally. This was in the back of my mind since I started using angular. And you've answered my question about other ways to share data.

[@marie-helenedelteil3382]

Thank so much !!! You are the best in the jungle of Angular videos...

[@suhail_kc]

A short and clear explanation. Thank you.

[@ParasBansal10]

Such quality! I loved your video. This is the best tutorial I have ever seen, to be honest. And I have seen thousands (on different technologies).

[@Fireship]

Wow, thank you! I hope to make more similar to this one :)

[@Aliana9603]

Thanks, that was a quick and good refresher on data sharing in Angular!

[@alexandersoltesz8103]

Awesome video, easy to follow, clean and straightforward examples, solved the problem I've been working on perfectly!!

[@krishnabala7359]

Really awesome .... You just connected to core of component communication concepts

[@fewicharlie]

This is amazing. I've been watching your videos since yesterday and I learn something new in each of them. Keep it up!!

[@MartinPultz]

You just blew my mind with the RxJS BehaviourSubject!

[@akash.deep1001]

Short ,concise and Straightforward 🤞

[@alfredopon7303]

Your videos are a treasure to watch! Thank you!

[@Akshay-Malthane]

For background music i watched this video for several of times.. Please let me knw the name of that music

[@siddharthbehra5250]

God bless you and your family. The explanation along with the background music was great. So helpful. :) Appreciate the great work man, keep it up!

[@inobrega]

Many Kudos to this tutorial! Love this BG music... relaxing!

[@beginner2expert]

You can try this example as well: kzbin.info/www/bejne/b2bYnax8iJWYgtE

[@ibrahimmohammed3484]

savior as always, i keep coming back to this for a reminder

[@StephenMoreira]

Wow this was great. Really good at breaking down the concepts to consumable bite sizes.

[@kayldomaj6493]

Perfectly clear, thank you. I didn't know about the rxjs way. Only thing is that you now need to import from 'rxjs' instead of 'rxjs/...'

[@Ghaniballx]

Why assign BehaviourSubject instance to a new public property? I mean this line(3:40 in video): > currentMessage = this.messageSource.asObservable(); Isn't "messageSource" already an observable?

[@Fireship]

Good question. That's actually a "best practice" to prevent new values being pushed to the BehaviorSubject from outside the service. Completely optional though.

[@pradeepkumarnm7127]

( my self being newbie to angular) ...Amazing.... tutorial... Am I the only who took more than 15 min to capture and understand. Really gives some work to brain apart from just seeing

[@bodasandeepkumar4234]

tons of knowledge in just 5 mins. thanks a lot !

[@hiddenNinja_KD]

Nice tutorial for communicating among components! :) It gave me new ideas for implementing sessions, thumbs up!

[@Fireship]

Thank you, good luck with your project.

[@saptarshimandal9370]

Best explanation till now . Thanks a lot!!!

[@georgehuman7253]

Great structural explanation. Simple and clear examples. Good job! Thanks!

[@marlenehasslinger2126]

Thanks so much for this video! It made everything very clear in just a little over 5 minutes

[@TopHDToonZ]

Straight to the point and everything works flawlessly. Thank you so much.

[@KumananMurugesan]

Very nice explanation of data sharing between componenrs. Thank you.

[@deborahjamesmathew]

thank you so much !!! Was able to subscribe to shared data in a service from multiple components.

[@Shree79124]

After 1 year experience in Angular , now I can understand how Subject Behavior exactly works

[@icasemobileservicecenter3293]

how to child => parent don't need Output() + EventEmitter?

[@AdityaSawant-bk7dd]

Great tutorial. The last example was exactly what I was looking for. you saved me thanks🤩

[@BodyAli96]

thanks of making my day with angular easier ❤️

[@DividedStates]

0:37 always the same when people are explaining this, they use the same name and than you have something like [message] = "message". and that is then references without brackets or quotation marks somewhere else and you have a hard time, which to put in curly brackets in the child. 4:38 Here again: is this 'data' and 'DataService' your name for the service or a rule? when you write "this.data." it refers to the name of the service which is called data.service, right? And when you write DataService it is a predefined name like component or onInit? How do you handle multiple services.

[@gdtrombetti]

I feel like I can't thumbs up this video enough. Thank you very much !

[@LOOTS243]

use two fingers instead. works every time

[@Jopie65]

The last example caused a leak! The subscription was *not* captured and unsubscribed on component destruction. It's better to avoid explicit subscription from typescript code and let Angular manage subscriptions itself by using the async pipe in the template.

[@inspireantonio]

Best tut video ever! Clear and concise.

[@achrafelkhandouli]

all my headaches gone in one video, great content!

[@nickbunich3165]

Great stuff i really liked the format! I think it might makes sense to add ng-content to the list

[@Felix-og7pd]

parent - child (input) child - parent (output + eventEmitter) any - any (rxjs)

[@Childofaking4eva]

You deserve way more subscribers. But with time and your continued effort I believe you'll get there. Very good content!

[@atakandurkal2400]

That is a great video very clear and well explained . Liked it !!

[@RS3helper]

Great video, i wish this would have covered component and state store

[@jitujahagirdar613]

Really Nice and quick video. Exactly i was looking for same. Thanks You..! for this super video. Really like it.

[@petermen9914]

It's 2021 but that was exactly what I need

[@mtsurov]

where can i get this soundtrack ? I'm addicted to it . Seriously, it helps me study more than you know.

[@beginner2expert]

You can try this example as well: kzbin.info/www/bejne/b2bYnax8iJWYgtE

[@SachalChandio]

you are awesome can you also talk about signals and effects and new things in angular like standalone components that makes things easier

[@danpride2804]

This is an absolutely awesome presentation.

[@gokhanozturk8420]

perfect explanation. short & clean. thanx.

[@imhappynow8471]

thank you for making this video 5 minutes and not 30 boring minutes lol. make more loved it

[@anilwagh235]

Really good short and concise

[@gurpritsingh5741]

Clear and concise explanation. Thank you.

[@carolinavega159]

Awesome! This helped me a lot, thank you!

[@orlandogarcia4403]

2020 and I still love this video with the background music :3