Sharing Data between Components in Angular

in this episode I'm going to show you four different ways to share data between angular components parent to child via the input decorator when you declare a variable with the input decorator in the child component it allows that variable to be received from the parent component 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 component can display the data in its own template [Music] child to parent via output and event emitter another way to share data is to omit it from the child which can be listened to by the parent this approaches ideal when you want to share data changes that occur on things like button clicks form entries and other user events in the child we declare a message of that variable with the output decorator and set it equal to a new event emitter then we create a function named send message that calls emit on this event with the message we want to send lastly we create a button to trigger this function in the HTML [Music] 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 message event that's outputted by the child component then run the receive message function whenever that event occurs child to parent via view child view child allows one component to be injected into another giving the parent access to all of its attributes and functions when caveat however is that the child won't be available until after the view is fully initialized this means we need to implement the after view in it lifecycle hook to receive the data from the child [Music] inside the after view and it function we can then access the message variable that was defined inside the child component share data between any unrelated components when passing data between components that lack a direct connection such as siblings grandchildren etc you should use a shared service when you have data that always needs to be insane I find that the rxjs behavior subject is very useful in this situation the main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up-to-date data in the service we create a private behavior subject that will hold the current value of the message then we define a current message variable set to an observable it will be used by the components lastly we create a function that calls next on the behavior subject to change its current value [Music] the parent-child and sibling components all receive the same treatment we inject the service in the constructor then subscribe to the current message observable and set its value equal to the message variable now we can create a function in any one of these components that changes the value of the message when this function is executed the new data will automatically be broadcast to all their components [Music] that's it for data sharing see you next time [Music]

Channel: Fireship

Views: 378,413

Rating: 4.9129105 out of 5

Keywords: angular, angular 4, angular 2, webdev, app development, typescript, javascript, lesson, tutorial, rxjs, behaviorsubject, data sharing, service injection

Id: I317BhehZKM

Length: 5min 19sec (319 seconds)

Published: Sun Apr 30 2017