Sharing data between components in Angular.
Learn using @Input() and @Output() , @ViewChild() , and using RxJS BehaviourSubject.
Angular uses a component-based approach where developers create components that can run independently, therefore, modularizing their application. The advantage to this is you can easily understand your application by separating it into multiple chunks where you can work on small segments without being overwhelmed by the thousands of lines of code. Maintenance of code becomes easier. Also, a team can work efficiently where each developer works on independent components then tie them all to the main application. What if you want the components to interact whereby clicking a particular button creates a notification icon. These two components should be able to communicate for the component holding the button to let the component holding the notification icon that the application state has changed.
Let’s identify a few ways we can do this.
Parent to Child via @Input() decorator.
When you declare a variable in the child component with the @Input() decorator, it allows that variable to be “received” from the parent component template.
In our case here, we will be receiving an array of objects from the parent template and storing the value received in the variable notifications. Let’s construct our parent component…
In the parent component, we can pass data to the child component directly in the template (view line: 8). Alright, what if you want to pass data from the child component to the parent component?
Child to parent via @Output() and EventEmitter
To pass data from the child to the parent, you have to emit it from the child. The parent will be listening for the event will grab the data.
In our child component, we create a username emitter that sends the username anytime the user clicks the Send Name button. To receive the username in the parent, we have to create a function to grab that data and put it into a variable…
In our parent component, (usernameEmitter) listens for the event with the message attached to it and when the message is emitted, it captures the data in the $event and sets this.username to the value of $event.
Using @ViewChild
Another simple way is to use the@ViewChild decorator. The child component file remains largely the same and the only changes we will make is to the parent.
Any => Any via a shared service
Components can get a little tricky sharing data when the application starts to grow and you find components within components that require to share data with components outside their parent components. Consider the following theoretical application structure below.
If you want an action made on the card-item component to affect the profile-avatar-status component, it could be complicated to emit an event up to the content component, further up to the app component, then down to navbar component, then down navmenu and finally to profile-avatar-status. It gets even more complex as the app grows. And even if you think you can manage to keep track of all the flows of data, what happens when you have to remove or merge two components? This becomes very tricky and complex. Using a shared service, all components can subscribe to channels of data that are called observables. When these observables change, all components that had subscribed to the observable gets updated. Having a central source of information makes it easier to track changes in data in a large application.
Use your Angular CLI to generate a new service using the command ng g service service-name to create a service. I’ll call mine State since it keeps track of the application state.
Using behavior subject, we are able to set username as an observable that can be changed using the .next() method. We can, therefore, import this service and utilize it from any component. Let’s create a component that makes changes to username and subscribes to username and reflects these changes. You can subscribe and change the username from different components, they don’t have to know about each other’s existence.
When the state changes any property that has subscribed to it will update it’s value to the new change.
Conclusion.
Angular provides a number of ways to pass data in between components. I would recommend using a service as much as possible to keep your logic clean and easily accessible from one point. If you’re working on a simple application, you can use the various decorators that the frameworks provide. If you would like a Kickstarter on Angular, here is a previous article along with two more related to Angular from me. Thanks!
More on decorators…
