Component - grungy wooden headline on Maple  - 3D rendered royalty free stock image. This image can be used for an online website banner ad or a print postcard.

Angular Output

In a previous post, we looked at sharing data from parent to child component. How do we go from child to parent? We use the @Output decorator.

Angular is really a one-way data flow. We can do two-directional with banana in a box (see a previous posting I did about this). Output allows us to emit from child to parent.

As you can see from the above, I have a button in my child component. When the user clicks the button, the click event is fired, which runs the clickChildButton method. Let’s see how to use that from the parent…

I am using the child component inside the parent root component. This creates the parent/child relationship. If you run the application, you will see the button and when it is clicked, you should see the console message.

This is fairly straightforward, but what if we want to trigger a method in the parent component when the child component’s button is clicked?

For this functionality, we have to emit the button click from the child to the parent. This is why we have the EventEmitter imported. Let’s make the necessary child component changes.

Here we created a variable to hold the data (msg). We also created an emitter (showChildInfo) that will send an emit to the parent. We created a function (childInfotoShow) that we can call in an event like a click. This will emit the msg and pass the data value. SO what does the parent look like?

In our app-child element, we are binding an event to use the showChildInfo event. We call the showInfo method on the showChildInfo event. We then display the msg that was passed from the child in the console.

So, we can communicate between parents and children. The @Output decorator allows us to use events in a parent to display information from a child.

Happy Coding!

Clay Hess

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Skip to content