Welcome again! Have you heard about the interaction of components in the Angular and their transfer? Perhaps you even wanted to pass data from one component to another, but you have problems with it? In this article you can read how to transfer data in AngularJS Development in different ways, as well as using a state manager.
Components are one of the key elements of an application. The component controls the display of the view on the screen. As a rule, components need to be made as “dumb” as possible to make them easier to maintain and test. But at the same time, they are customizable and flexible so that you can reuse them many times, and not engage in cloning components that are visually and functionally similar, but still somewhat different. Or not add a bunch of parameters to the components, based on which you can enable or disable any behavior of the component, but which in fact will be used in 1 out of 100 cases.
There are several ways to transfer data from one Angular component to another:
- @Input () properties;
- @Output () properties;
- @ViewChild () properties;
- Service
The @Input () decorator allows you to pass values to child components, but only one level of the hierarchy. @Output () simulates the event and passes the data to the parent component. Using @ViewChild () on the parent Angular component will get all the properties of the specified child component.
Another way to pass data between components is by using services. A service is one of the Angular entities that implements the Singleton design pattern and serves as a data store. Another common use of it is storing methods that make HTTP requests to the server. Typically, a service is defined at the level of the entire application as a whole. Therefore, all Angular components access the same instance of it. Services must be imported into the root module before the usage.
Let’s look at another problem in the interaction of components
In many frameworks, including Angular, there is always a problem of component interaction when we split the application into many small UI components and bind to the parent component of the parent component to listen for events. In Angular, we use Output () and Input (). In standard cases, this is enough, but when you need to bind incoming data and outgoing events to the parent component, managing this all becomes a nightmare.
You have to add a bunch of Input () and Output () to many levels of the component – it’s a lot of work, risky and doesn’t always work. One solution is to use a state manager such as Redux, NGRX, or NGXS to help unrelated components communicate. I will present two additional ways to solve this problem, which do not require the use of additional libraries: 1) Event Transport by using the Subject; 2) Observable Service with Behavior Subject.
- Event Transport. The concept is very simple. You are creating a service whose events will be available everywhere. The service propagates events, and subscribers can execute a callback function when the event occurs. Every time the user clicks on an article list item, it generates an event and dispatches it using the Event Transport. It will pass the article data into a local variable and display it in the user interface.
- Observable Service. The idea is to simply create a way to transfer data from within. That is, every time a value changes, the observer learns about it and performs a callback function. Every time a user clicks on a list item, he adds an article to the store.
These approaches can be applied to many projects. Event Transport and Observable Service for nested components: it is difficult, using Input () and Output (), to associate the input / output data and events of the UI component D with the UI component B, with the UI component C and with the parent component A when interacting with the API.
Conclusion
In this article, you learned several ways to transfer data from one component to another. Some of them are very simple, some require extra effort. We use the Observable Service to subscribe to data for simple cases, and use the Event Transport to send different events to different users. Hope the article was helpful!
