Component is a basic building block in any angular application. There may be the number of components we can create in a single application. We can use the one component inside the another component also. So for this we need to communicate between the components.
There are so many ways to share the data between components.
- Sharing the data between parent to child component
- Sharing the data between child to parent component
- Sharing the data between sibling component
There are another ways also to share the data between components but these are most recommended ways. Lets see in detail now-
1.Parent to child communication using @Input() : To share the data from parent component to child component you can use the @Input decorator.
Lets create two components parent component and child component.
Add the below code in parent component ts file.
parent.component.ts –
In parent component we have just created one variable i.e title and assigned some value to it. Now we need to pass the value of this title to child component. For that we need to add the selector of child component in html file or in template.
Add below code in parent component html file or inside the template –
parent.component.html
Here you can see we have used property binding. By using this we are passing the value of title to child component.
Now lets see how we will get this data in child component.
Add below code in child component ts file –
child.component.ts
So in child component we have used @Input() decorator , name of the property i.e title, its type and assign one default value as blank. Default value is nothing but if we will not receive any data from parent component to child then it will display blank.
Now in child component html file or in template you just need to display this value.
lets add below code in child component html file.
child.component.html
so in this way you will be able to share the data from parent to child component.
2. Child to parent communication using @Output() and Event Emitter : To share the data from child component to parent component you can use the @Output and Event Emitter.
Lets create two components parent component and child component.
Add the below code in parent component ts file.
parent.component.ts –
Here we are using the data coming from child component.
Now lets add the below code in parent component html file.
In html code we are using the event binding to emit the event from child component. Now in child component will emit the data which we want to pass.
Lets add below code child component ts file.
child.component.ts –
In above code emitData() will called on any action by which you want to pass the data.here we are using click event on button.
Lets add below code child component html file.
child.component.html –
3. Child to parent communication using @ViewChild() : By using @ViewChild() we can inject the child component into parent component. It will give the parent access to its attributes and functions. It is must to use AfterViewInit life cycle hook to receive the data from the child if you are using @ViewChild.
Add the below code in parent component ts file.
parent.component.ts –
here we have inject the Child Component using @ViewChild(). And now we can use all the properties and function of child component. Lets see what we need to do in child component.
Add below code in child component ts file
child.component.ts
4. Unrelated or sibling component communication using services : If there is no relation between the components or if they are siblings then , you can share the data through services using the observable. We will see the example by using Rxjs subject. Firstly you need to create one service file. So lets create app.service.ts file.
Then add the below code in that file
app.service.ts
To emit the data you can call the emitData() method of this service and for getting the data you have to subscribe to subsciber$ like this:
add below code where you want to get the data from this service. Lets add in app.component.ts file as of now.
app.component.ts
So in this way you can subscribe the observable and get the data in your component.
Conclusion : So these are the common ways by which you can share the data between components. There are another ways also like you can pass the data through url , local storage etc. But all depends on components relation.
