Listening for Events Using an Output Binding
Learn how to listen to events using output binding and emit data through custom events.
We'll cover the following
Previously, we learned that input binding is used when we want to pass data between components. This method is applicable in scenarios where we have two components, one that acts as the parent component and the other as the child. What if we want to communicate the other way around, from the child component to the parent component? How do we notify the parent component about specific actions that occur in the child component?
Consider a scenario where the product details component should have a button to add the current product to a shopping cart. The shopping cart would be a property of the product list component. How would the product detail component notify the product list component that the button was clicked? Let’s see how we would implement this functionality in our application:
Open the
product-detail.component.ts
file and import theOutput
andEventEmitter
artifacts from the@angular/core
npm package:
Get hands-on with 1400+ tech skills courses.