Today, we are going to talk about Angular Component Communication, the last version of Angular is @9, but I will show definitions to communicate in all angular versions, probably it will be in the angular platform for a long time. If you need to start with basic concepts in Angular I recommend for you before reading this article. the tour of heroes tutorial Angular is based on components, so if you start to create a page in angular you should split this page into small components. Each component is a container for a small logic, HTML, and CSS. When you have a lot of components you have a big problem called "Communication". How can I communicate with these components Or what is the best way to communicate my components? In the next image, there are some components and examples of how you need to communicate with parents with children, siblings, child to parent, and more cases. Ways To Communicate Input / Output Services ViewChild Event Bus Service State Management Input / Output There's an easy way for component interaction in angular. Basically, you use @input and @ouput decorator to communicate components. You can find good and easy documentation . here @Input() hero: Hero;
@Output() voted = EventEmitter<boolean>(); new Services A parent component and its children share a service whose interface enables bi-directional communication within the family that definition is from angular documentation. In summary, you can create a service and you should inject this service in each component to share information. Of course, Angular doesn't talk about another kind of services so I'll tell you some basic services implementation: Singleton It’s simple: you create a service and you can create variables, properties, and methods in your service to share data. You should use it only if you need to share easy data loaded just one time. Service Subject This is also called service message or observable subject. Here, you create a service and also use observables from rxjs to update data and communicate changes for all components subscribed to this service. You can find an easy tutorial . here However, Subject has other abilities to subscribe and emit data in observables: : they support multiple subscriptions. In other words, they are multicast Subject : it will give you the last emitted value right away Behavior subject : Replay Subjects keep a given number of historical values so that those values can be replayed to new subscribers Replied subject : Subject emits only once it completes and emits only the latest value it received Async subject If you are interested in more about it, you can read this also you can see an example in codesanbox: article Emitter Service In angular 2, we had a lot of problems with communication. If you don’t have too much communication and you need to do it in a simple way, probably you could create a service with EventEmmiters and register these events in an object, and they will call it with a get method. Here is an old with the solution or you can see my . post example ViewChild You can attach your child component with parent component with a decorator called @ViewChild. I won't explain too much of it because you can find more in the official angular . docs Event Bus Service You can create a service with an event bus. It is passing data between different components and it's going to be a type of mediator or middleman. You should use it if you need to decouple components. This solution uses a Mediator Pattern, so with this pattern you don’t need to know other components or what component is reading your data. It’s perfect when you use unit testing. As you can see in the image, the mediator pattern is like an airport, airplanes don't communicate between them, they use a central tower to keep communication and separate responsibilities. State Management For larger Angular applications with a lot of asynchronous activity and where there's a lot of states that are being shared and manipulated across multiple components and modules. Managing the state can be quite challenging. In a typical application, we're managing things like: Data that comes from the server and whether it's pending or resulted in an error UI statelike toggles, alerts and errors messages User input, such as form submissions, filters and search queries Custom themes, credentials and localization Many other types of state In summary, these problems come from SPA pages, and the solution is to create a single state to centralize and manage states for our application. You will have a unique store to share data between components. There are also libraries to implement this solution like NgRx, NgXS, Akita, or plain RxJS. Above, I tried to explain the most common ways to communicate components. I think it’s an important decision when you are building your application, so each angular developer should know at least 3 ways to communicate to make the right decisions in your development. Previously published at https://www.jucayovera.com/blog/article/7

Different

Keep

Modern Front End Architecture

The Advantages and Disadvantages of Angular

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Component Interactions in Angular

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

For Developers: How To Prepare for a Job Interview

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

For Developers: How To Prepare for a Job Interview

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps