Sharing Data between Components in Angular

In this episode, I am going to show you four different ways to share data between Angular components.

Parent to Child the Input Decorator

When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent template. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own template.

Child to Parent via ViewChild

ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won't be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child.

In the AfterViewInit function we can access the message variable defined in the child

Child to Parent via Output and EventEmitter

Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events.

In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function.

In the parent, we create a function to receive the message and set it equal to the message variable.

The parent can now subscribe to this messageEvent that's outputted by the child component, then run the receive message function whenever this event occurs.

Share data between any components

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS `BehaviorSubject` very useful in this situation. The main benefit that a BehaviorSubject ensures that every component consuming the service receives the most recent data.


In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable.

Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it's automatically broadcast to all other components.

That's it for data sharing. See you next time.

[zlatanonkovic]

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!

[squarebynature]

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

[stevenskharisachaesquerre]

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

[MaDaaBre]

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

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

[jyothijyo]

The simple and best tutorial on components communication.

[phuduc]

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

[ibknl]

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

[QuentinMayo]

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

[davesharp]

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.

[hussain]

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

[brandoncluff]

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

[jonatacardoso]

BEST EXPLANATION about data sharing in angular!!

[abduljabbarazam]

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.

[glacial_chinchilla]

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

[saoudiwalid]

Short and straight to the subject, I loved it.

[stefanoslalic]

Never stop what you are doing, you are genius

[patrickrossello]

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

[nodarii]

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

[petermen]

It's 2021 but that was exactly what I need <3