Communication between components in Angular

How to communicate between components

We distinguish several ways of communication between components: parent to child, child to parent and any to any.

In this post I will show an example of the implentation of each of the ways.

Example

The application has three components nav and profile which has a child profile-edit.
1. I would like the name from the profile to be send to the profile edit.
2. When changing name in profile-edit, I would like to pass this value to the parent (profile component).
3. When changing name in profile-edit, I would like to refresh name value in the nav component.

Parent to child

Passing data from parent to child is possible thanks to @Input annotation.

The parent has a defined value name:

Now you must declare input in your child:

Then passing the instance of the profile-edit component in the parent of the name parameter looks like the following:

Child to parent

The @Output annotation allows us to achieve the opposite result, pass values from child to parent by using the EventEmitter.

EventEmitter is a generic type and we can determine what type the parameter will be. In our case – string.

To the button confirming the change of the name I pass the method that will call the event using the emit function

Now, to pass the method that will be triggered when the event is emitted, all you need to do is:

This will result in calling the nameChanged function of the parent and passing it in the form of an argument – a new name.

Child:

Parent:

In this way we can influence the change of the name from the child to the parent.

Any to any

For communication between unrelated components we will need a injectable service which is designed to provide method or properties across to any components. For this purpose I will use the BehaviorSubject which is a type of Observable (can be subscribed to, subscribers can receive updated results and subject is a observer which mean that we can send value to it).

BehaviorSubject needs a initial value, so at first I have to create new service and create new behavior subject from rxjs’.

So the username is now unobservable of type behavior subject so set a currentUsername property as observable.

We also need to add a method that will update the username in which we call the method next on the observable object which will notify observers about the change of state.

User service:

Now in nav component we need to inject userService to subscribe to the currentUsername.

Then we need to call the changeName method with useservice when changing the name in the profile-edit component.

Which means notifying all subscribers of a change in value.

Result:

Whole code available on github.

Leave a Reply

Your email address will not be published. Required fields are marked *