Share data between Angular components - 7 methods

Angular 2(+)Angular 4/5SiblingShare datacomponentsThrough routesServices

In this article we will be discussing about 7 different ways for sharing data between Angular components. I have written separate articles for the same in my previous posts. I am adding all those methods here.

1. Share data between parent and child component.
2. Share data between components using ViewChild.
3. Share data between sibling components.
4. Share data between components using service file.
5. Share data through angular route.
6. Create reusable component and pass data to component.
7. Share data between non related components.

Let us check one by one.

1. Share data between parent and child component

---

This is one of the common scenario which you definitely should know to build an Angular application. Below are some of the common scenarios,

1. Share data from parent component to child component
2. Share data from child component to parent component
3. Invoke child component method from parent component
4. Invoke parent component method from child component

I have already written an article for the same, check below link for that.

Share data between parent and child component

2. Share data between components using ViewChild.

---

This is another way of sharing data between parent and child components. Here basically we are injecting other component and sharing the data. Check below link for the same.

Share data between components using ViewChild.

3. Share data between sibling components

---

This is another scenario which you may face while developing an Angular application. But you should try to avoid creating tow many siblings as it may not be a good idea. Check below links for sharing data between sibling’s components

Share data between sibling components

4. Share data between components using service file

---

This is another popular way of sharing data between components. By making a service common you can share data to any component. You don’t need to worry about parent, child or siblings, you can simply share data by making a service file common to both components. Check below links for the same.

Share data between components using service file

Communicate between components using service file

5. Share data through angular route.

---

This is another way of sharing data between components. It will help you while navigating from one component to another component. You can pass an array or object through routes.

1. Pass data using route
2. Pass data using Query Parameters
3. Pass data using Application Providers

Check below link for to know more about different way of sharing data through routes.

3 simple ways to share data through angular route.

6. Create reusable component and pass data to component

---

You can simply create a component and which can reuse with in the application easily. You can share or receive data from this components. Check below link for that.

Create reusable component and pass data to component

7. Share data between non related components.

---

By using a simple service along with angular BehaviorSubject and ngOnInit, we can share data between non related components Very easily.

Share data between non related components - Angular 4

In this article we have discussed about various ways of sharing a data between angular components.

Angular 2(+)Angular 4/5SiblingShare datacomponentsThrough routesServices

Related Info

1. Http calls in Angular with simple examples.

2. 5 different ways for conditionally adding class - Angular.

3. Angular 2/4 routing with simple examples.