Скачать или смотреть How to Pass Values Between Sibling Components in Angular

Learn how to transfer data between sibling components in Angular, specifically using services. This guide will guide you through effective methods and best practices.
---
This video is based on the question https://stackoverflow.com/q/62591719/ asked by the user 'derirative23' ( https://stackoverflow.com/u/11271625/ ) and on the answer https://stackoverflow.com/a/62591827/ provided by the user 'CorrM' ( https://stackoverflow.com/u/3351489/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Pass value to the same level component

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Pass Values Between Sibling Components in Angular

In Angular development, passing data between sibling components can often be a tricky challenge, especially when you are trying to maintain a clean code structure. If you're facing a scenario where you have multiple components at the same level that need to share data, you might be wondering what the best way to achieve this is.

The Problem

Let's imagine an application structure with the following components:

Sidebar Component: Contains a button that fetches data via an API call through a service.

Data Service: Responsible for handling HTTP requests and returning data.

Body Component: Displays the data that is fetched by the Sidebar component.

You want to pass an array of values (things) from the SidebarComponent to BodyComponent, but they are not in a parent-child relationship. This is where @ Input and @ Output decorators won't work as intended. How can you establish this data sharing efficiently?

The Solution

Understanding the Components and Service

SidebarComponent: Fetches data based on a user's selection and stores it in an array called things.

DataService: Works as the middleman to handle API requests and fetch data based on an identifier.

BodyComponent: Needs to access and display the things array that was populated in the Sidebar.

Step-by-Step Guide to Share Data

1. Rename Variables to Avoid Conflicts

In your sidebar.component.html file, you have the following line:

[[See Video to Reveal this Text or Code Snippet]]

It's better to avoid using the same name for both variables. Modify it to use thing for iteration:

[[See Video to Reveal this Text or Code Snippet]]

This improvement helps prevent potential conflicts and confusion within your code.

2. Loop Directly Using <div> Instead of <ng-container>

Instead of using <ng-container>, which adds complexity without necessity, you can simply use <div> for looping through your data:

[[See Video to Reveal this Text or Code Snippet]]

This change streamlines your template and enhances readability.

3. Utilize the Data Service for Data Sharing

To pass data to the BodyComponent, you can create a method in your DataService to expose the things:

In data.service.ts, add a method that returns the things:

[[See Video to Reveal this Text or Code Snippet]]

Then, in your BodyComponent, you can inject the DataService and access the getThings() method:

[[See Video to Reveal this Text or Code Snippet]]

4. Update Body Component Template

Finally, ensure your body.component.html is reading the things correctly:

[[See Video to Reveal this Text or Code Snippet]]

This way, your BodyComponent can now access and display the data just as you required.

Conclusion

In Angular, components that are on the same level can effectively share data using a service as a mediator. By making a few adjustments to avoid variable conflicts and adopting a proper design to expose data, you can streamline the communication between sibling components with ease. Remember to keep your code organized and follow best practices for cleaner, maintainable development.

Now you can confidently tackle data sharing in your Angular applications!