How to Communicate Between Components in AngularWojciech SzućkoBlockedUnblockFollowFollowingJul 18, 2017Multiple components make our application more reusable, but how do we communicate between them?Source https://unsplash.
com/photos/6bKpHAun4d8Passing Data to a ComponentWe 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 name variable:Our 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 ComponentThere’s an@Output() decorator, just like the @Input(), and you can import it from @angular/core:We changed our @Input() decorator to @Output() and initialized our name variable with Asu in the constructor.
In app.
component.
ts, we need to read the name variable like an object property but first let’s add angular id into app.
component.
html:We can use the id #firstComponent in app.
component.
ts by using the@ViewChild decorator from @angular/core: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 ComponentsService!.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 app.
module.
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 second:And add it to app.
component.
html: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 Subject and Observable.
What’s the benefit in using these?.name will refresh in thefirst 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 StoreService.
In constructor, we subscribe to the function from StoreService called getName(); we can subscribe to this because it returns Observable.
Subscribe means it will do everything inside subscribe whenever Observable changes.
Observable will change whenever we will call thenext function on the Subject property, in our case, called name.
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.
.