Angular Components Interaction – Part 2

In this section, we will extend our existing example to new level. Many a times it happen, that InputType, which we are referring, we don’t want to use the same property outside the component. Therefore, in that case, we may use alias for @Input() types.

Below is the finished snippet from reviews.component.ts.

As you can see, that inside @Input() decorator, I have passed string variable as alias and the same I am getting used in movies.component.html for property binding.

With the above change in place, when I see output, it will remain same like

Now, here I have improvised the form to consider user input. Below is the snippet for the same.

And, Corresponding Typescript code looks like

However, Once I place ngModel on the markup, it failed with below reasoning.

This normally happens, when your module is not having forms module imported. Hence, in order to fix the same, we need to import Forms module in app.module.ts file like shown below.

With the above change in place, Form will appear properly like shown below However, here If I click on Add Movie or Review button, it will add the same in Movies or Reviews collection and then it will log in console like shown below.

Similarly, on Add Movie Review, it will show like

Now, it would be nice, if we can communicate this event back to parent saying that new movie added or new review added. In order to handle the event, we can say like this

Let me explain the code here. Just like, we usually listen to any built-in events like click, here I will be listening to custom event and on that event, I called a function with $event as parameter, which will basically supply the object, which we passed in. Now, we need to create this custom event somewhere and that somewhere is movies.component.ts file as this event will be raised from here. Below, I have pasted the finished snippet for the same.

Here, What I have done is I have created two Event Emitters property which my app.component.ts will be listening. Now, EventEmitter, accepts generic arguments, hence I passed Movie and Review respectively to that. Then, in the function like onAddMovie(), I have emitted that event which parent component like app.component.ts can listen to.

Similarly, I have done for review as well. Here, I have also passed the object as well so that same data can be received at parent level. Also, I have marked my EventEmitters as Output because we are passing our events outside to the component. Basically, we are making these listenable from outside. With the above change in place, when I see the output, it will produce values in the console like shown below

This is OK. But, not very generic solution. But, we understand the gist of component communication. However, we can improvise on this solution like shown below.

And corresponding markup

With the above change in place, now markup looks like

This I created for a reason and that is to support multiple values as this takes array as input. With that being said. I can add now multiple values like shown below.

Therefore, in this post we have seen how to listen to custom events and then perform some action on that. In the coming section, we will delve further. Till then, stay tuned and happy coding.

Download Code:- https://github.com/rahulsahay19/Angular-4-components/tree/2nd-Part/

Thanks,
Rahul Sahay
Happy Coding

391 total views, 2 views today