How to communicate between components in Angular?
We can make multiple components, application will be more reusable but what’s about communication between them?
Pass data to component
@Input() decorator from
@angular/core to pass data to component from parent. Let’s make a simple example.
Firstly we need to create new component
ng g c name_of_your_component I called my component
first. Then import
@Input() decorator and create
first.component.html should looks like this
Now we should use our component in
app.component.html but what’s about that
name variable? We can pass data to component, just like using
class="btn". Not clear? See example below
ng serve -o and you should see
Hello, Asu! It’s easy way to pass data to component from parent component.
Get data from component
@Output() decorator just like
@Input() you can import it from
We change our
@Input() decorator to
@Output() and initialize our
name variable with
app.component.ts we need to read
name variable like object property but first we need add angular
id way in
We can use this id
app.component.ts by using
@ViewChild decorator from
In line 10 we use
@ViewChild('id') in this case id is
firstComponent. Further part is standard
accessor name_of_variable: type. In
ngOnInit ( function implemented by
OnInit interface) we use basic alert function to show
name from first component. Why we need to do this in function called
ngOnInit. You can try do the same in
constructor. In console you should see an error
Can't get name of undefined or something like that. That’s because on constructor level our firstComponent doesn’t live yet. It’s going to be live when our parent component is going to be live.
Ultimate way to communicate between components
Service! Yes, use service to communicate between components. There’s no need to have relations like parent-child or child-parent.
ng g s services/Store --module=app. I add
--module flag to provide service in
I want to show you bad example, for that we need to do some changes in our components.
In line 14 we inject
StoreService. It’s available from
store property. Let’s generate second component called
And add it to
In this simple example we change
second component, then we refresh it in
first component. A lot to do to just change the name… And that refresh thing, damn pretty bad for now. Because of that we use goods from
rxjs library called
Observable. What’s good about these?
name will refresh in
first component by itself, without our help. Let me show 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 function from
getName(), we can subscribe for this because it returns
Observable. Subscribe means it will do everything inside
subscribe whenever Observable will change.
Observable will change whenever we will call
next function on Subject property in our case called
For me it’s the best way to communicate between components, but it depends on how much components we have in Components Tree between our component and component which we want to share data with.