Sharing data between Angular components
Angular is one of the most known TypeScript ( is a superset of JavaScript) front-end framework developed by Google to create dynamic and modern web apps. First introduced in 2009, the framework has gained huge traction over the years for eliminating unnecessary code and ensuring lighter and faster apps.
In angular components are really important concept and part to develop frontend applications. Because components helps to divide our large scale project into small chunks.
Data sharing is an essential concept to understand before diving into your first Angular project. In this article, I provide four different methods for sharing data between Angular components.
Mainly in Angular apps we can see 4 main methods to share data between components.
Here are those 4 main methods :
- Parent to Child : Sharing data via input
- Child to Parent : Sharing data via ViewChild
- Child to Parent: Sharing data via output() and EventEmitter
- Unrelated Components: Sharing data with a Service
Now let’s look each data sharing method indetail.
Parent to Child : Sharing data via input
This method is the most famous method in Angular apps. Because it is very straight forward method and can understand easily.
We can implement this method by using @input decorator. In the child component we define a variable using @input decorator and in the parent component we bind that property in html with a value we need to pass into child component.
child.component.ts
parent.component.ts
Child to Parent : Sharing data 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.
parent.component.ts
child.component.ts
Child to Parent: Sharing data via output() and EventEmitter
When it comes to share data from child to parent we can use this EventEmitter method. In here we emit data from the child, which can be listened to by the parent.
This method is ideal when we want to share data changes that occur on things like button clicks, form entires, and other user events.
In the parent, we create a function to receive the message and set it equal to the message variable.
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.
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.
parent.component.ts
child.component.ts
Unrelated Components: Sharing data with a Service
This method use data service to share data between unrelated components. You can also use regular Rxjs subject for sharing data. But this method is more efficient and easy. Also this method ensure that component gets most latest data.
data.service.ts
parent.component.ts
child.component.ts
