How change in TWO child component can result in change in Parent component's Output?

Question

Here I have college task to do..where i got stuck in the middle.! I have two child component one is having the checkboxes to filter the result while one has the detail of the output to be display.Now I am done with the outer part ie layout but now getting confused how to imply its functions and all, guys please help me with this as i am doing this since last 1 and half days.

https://stackblitz.com/edit/angulaar-aman?file=src%2Fapp%2Fapp.component.html

here is the work i have done till now..!!

Answer 1

When any change happens in the checkbox child component, evaluate what all checkboxes are checked and pass that through event emitter. Using that data you can all the method of detail child component using template reference variable . Try that. I have made some changes in stackblitz . Let's simplify your structure as:-

<app-parent>
 <child-checkbox (checkedValues)="showFreshDetails($event,details)"></child-box>
 <child-details  #details></child-details>
</app-parent>

In above code, what I am doing is that when any check uncheck happen in child-checkbox component, you emit values reprsenting that, for example a json, of type

[{'option1':checked},{'option2':unchecked})]

Now inside showFreshDetails(json,details) (defined in parent component) you are passing this json and also the template reference variable of child-details component. Here it's defined as #details on child-details component. Inside the showFreshDetails(), you call a method of child-details component, for examp;le showNewDetails() using the template reference variable details, you can pass the json you emitted to that method as well if you wish.