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

We use @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 name variable.

Our 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

Do 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

There’s @Output() decorator just like @Input() you can import it from @angular/core.

We change our @Input() decorator to @Output() and initialize our name variable with Asu in constructor.

In app.component.ts we need to read name variable like object property but first we need add angular id way in app.component.html

We can use this id #firstComponent in app.component.ts by using @ViewChild decorator from @angular/core.

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.

Generate service ng g s services/Store --module=app. I add --module flag to provide service in app.module.

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 second.

And add it to app.component.html

In this simple example we change name in 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 Subject and 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 StoreService.

In constructor we subscribe to function from StoreService called 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 name.

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.