In this lecture, we're going to explore communication between components with a feature called outputs.
At the moment, the communication between parent and child components is one way parent components can
send data to child components with inputs.
What if we want to send data from a child component to a parent component if we want to communicate
with parent components?
We can emit custom events.
Communicating from a child component to a parent component is similar to parent to child communication.
We can send data to a child component by using the input decorator.
Similarly, we can send data back up to a parent component by adding the output decorator.
There are a couple of steps we need to take, but overall the process is still the same.
Let's try it out.
For this demonstration, let's inform the parent component, if the image was selected, we will be
working inside the post component class.
The first step to communicating with a parent component is to limit an event.
It's easy to work with browser events.
The browser will emit them on our behalf.
All we have to do is listen for them.
Custom events are another story.
We need to create a system for emitting and managing events.
Luckily, we don't have to.
Angular has a class for creating and managing custom events at the top of the file.
We're going to update the import statement from the angular slash core package to include the event
emitter class.
This object will help us with creating events.
Let's create a new property in our class called image selected.
Normally, event should be prefixed with the word on, however, Angular advises against that in the
resource section of this lecture, I provide a link to this guideline.
Hangi there recommends we omit the word on it's redundant and inconsistent, as we saw with the key
up event, Angular removes the on key word from the event name.
We should follow their lead for consistency.
Let's go back to our editors.
The value for this property will be a new instance of the event emitter class.
By creating a new instance of this class, we've made a custom event through this instance, we can
emit the event whenever we want.
Before we do, we should add types safely to our events.
We have complete control over the data emitted by our events at the moment.
The data can be anything we can send numbers, strings, objects, et cetera.
If we hover our mouse over the object, it'll tell us the type of data emitted from this event.
The data type is set to any the any type is something we should avoid unless we truly want to emit any
type of value.
For this example, we're going to send the parent component the URL of the clicked image.
The URL is a string.
We should add type safety to the values we emit.
We can add type safety by using generics.
After the name of the class, we all add a generic.
The type will be set to string.
Let's hover our mouse over the event emitter object again, this time the type has been set to string.
We've successfully added type safety to our custom event.
Events are the primary way of communicating from a child component to a parent component, which makes
sense.
That's how simple elements communicate data with us.
Angular simulates this behavior for our components.
There's one problem with our custom event.
The event we've created is only accessible to the component itself.
Parent components cannot listen to this event.
It's the same reason as before angular likes to isolate our components.
We don't want external code to interact with the properties from within the class unless we give permission.
In our case, we do want to allow the parent component to listen for this event.
We can instruct Angular to give permission to parent components by adding the output decorator on the
angular core package.
We're going to update the list of imports by adding the output decorator function.
Next, we will add the output decorator to the image selected property.
There are two more steps we need to take before we're finished, the next step is to limit our event
at the moment.
We've created it, but it will not automatically get emitted.
Let's try to handle this part of the process.
Open the post component template.
On the image tag, we're going to listen for the click event.
Remember to wrap the event with parentheses, otherwise angular will interpret this event as a regular
HTML attribute.
Next, inside the value, we're going to call the init function on the image selected object.
The event emitter object has a method for emitting an event called Emits by calling it, we're triggering
the event, we can send data to event listeners by passing in the data to the emit method.
Let's send the post image property.
The post component is ready, the last step is to listen for the event in the parent component.
Let's switch over to the app template file.
On the app post component, we're going to add a pair of parentheses.
Our editor will automatically recommend our custom event.
That's one of the perks of using the angular extension.
It was able to intelligently detect our custom events.
Let's select it from the list.
Next, we will run a method called log image.
The long image method will log the image sent by the component.
This method doesn't exist in our class.
We should define it before we do.
We should provide this image with the data emitted by our event, data emitted by it and event is stored
in the event variable.
The event variable is not the typical event object we are used to working with.
We will see what it looks like in a moment.
Let's move on to defining this method.
Open the app component class.
We will define the long image method with the event object as an argument.
The type for the event object will be a string.
The value emitted from our event is a string.
Therefore, we don't need to set this argument to an event object like we did last time with our change
text method.
Lastly, we will log the event object.
All right.
Let's refresh the page in the app.
The app is still working if we open the developer tools.
There shouldn't be errors in the console.
Let's try clicking on the image as we do.
The URL of the image is being logged.
It's not very exciting.
All we're doing is sending the data back and forth between the parent and child components.
However, it does show how we can communicate data between components.
So you may have noticed the value of the event argument.
Unlike last time the event argument, it's not an object with dozens of properties about the event.
It doesn't include information like the name of the element we clicked on whenever we're creating custom
events.
We have complete control over the event arguments.
We can choose to send simple data.
It depends on the needs of your event.
Keep that in mind when working with custom events.
That wraps up this lecture.
We've learned how to communicate between components.
It's one of the most common ways to work with data in components.
In the next lecture, we're going to look at an alternative option for passing down content from the
parent component to the child component.