Multiple components make our application more reusable, but how do we communicate between them?
Passing Data to a Component
We want to use the
@Input() decorator from
@angular/core to pass data to a component from the parent. Let’s review a simple example to see how this can be accomplished.
To begin, we need to create a new component
ng g c name_of_your_component, I named my component
first, then import the
@Input() decorator and create a
first.component.html should look like this:
We can use our component in
app.component.html, but what about the
name variable? We can pass data to the component by using
class="btn". Not clear? See the example below.
When you perform
ng serve -o, you should see
Hello, Asu! It’s an easy way to pass data to the component from the parent component.
Getting Data from the Component
@Output() decorator, just like the
@Input(), and you can import it from
We changed our
@Input() decorator to
@Output() and initialized our
name variable with
Asu in the
app.component.ts, we need to read the
name variable like an object property but first let’s add angular
We can use the id
app.component.ts by using the
@ViewChild decorator from
In line 10 you can see that we use
@ViewChild('id'). In this case, the id is
firstComponent. Further part is standard
accessor name_of_variable: type. In
ngOnInit, the function implemented by
OnInit interface, we use the basic alert function to show
name from the first component. You can try to do the same in
constructor but in the console, you should see the error similar to
Can't get name of undefined. That’s because on the constructor level our firstComponent isn’t live until our parent component is live.
The Ultimate Way to Communicate Between Components
Service! Yes, when use service to communicate between components, there’s no need to have parent-child or child-parent relations.
Generate the service
ng g s services/Store --module=app. I added a
--module flag to provide service in
I want to show you a bad example and for that, we need to do some changes in our components:
In line 14 we inject
StoreService. It’s available from the
store property. Let’s generate a second component called
And add it to
In this simple example, we changed the
name in the
second component, then refreshed it in the
first component. That was a lot of work just to change the name, and the refresh is not what we want. Instead, we can use tools from the
rxjs library called
Observable. What’s the benefit in using these?
name will refresh in the
first component by itself, without our help.
Let’s cover you how to do that.
We can leave our
second component how it is now, but we are going to change
first component and
In constructor, we subscribe to the function from
getName(); we can subscribe to this because it returns
Observable. Subscribe means it will do everything inside
subscribe whenever Observable changes.
We need to add
async pipe inside our html. Pipe itself will handle stuff like displaying new values or unsubscribe to subscription after component will be destroy (it prevents memory leaks).
Observable will change whenever we will call the
next function on the Subject property, in our case, called
In my opinion, it’s the best way to communicate between components, but it depends on how many components we have in our Components Tree that we want to share data with.