I have two child component product-list.component
,
product-details.component
whose parent component is
products.component
.
product-list.component
, I am displaying list of dummy products.product-details.component
, I want to display clicked product details.
After clicking the list, I am getting selected product in parent component(products.component) .*I want to display the selected product in product-details.component
.
Link of project is here
For passing the data from the child component to the parent component, we have to create a callback function in the parent component and then pass the callback function to the child component as a prop. This callback function will retrieve the data from the child component.
Child to parent component If you want to pass data from the child component to the parent component use @Output() and EventEmitter. To pass data from the child to the parent, you have to emit it from the child.
You were almost there. The output of the ProductListComponent
becomes the input of the ProductDetailsComponent
. For that, you just have to set the input of your ProductDetailsComponent
in your products.component.html
:
<app-product-details [detailRowInput]="detailSingleRow"></app-product-details>
see stackblitz
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With