Angular 4 Parent-Children component interaction

Question

Maybe I am trying to solve a problem in wrong way. I want to transfer data between two child-components through parent component.

I have a parent component(A) and two child-components(B,C). I want to emit an event from one child (B) and handle it in parent (A) and then pass it's content as input to other child (C). But I can't get this to work. I get the value in the parent (A) but when i use below code in parent to pass data to other child (B) the input is undefined or zero and there's no value in the event.

 <workorders-details (pushedWorkOrderKeyEvent)="setDetails($event)"  [myinput]="($event)"></workorders-details>

I have also tried to set a value to event in method setDetails(event) in the component and set [myinput]="value", but nothing works.

Answer 1

[myinput]="($event)"

This is not going to work. On your output, set value to some variable and use the variable in myinput like

setDetails(abc){
  this.xyz = abc;
}
// and then your html
[myinput]="(xyz)"

For basics of input and output directive see "Angular component communication by using Input Output decorator"

Answer 2

You can't treat that $event parameter like it's globally available in the template, it's scoped to the specific output event you're binding to. You need to write logic to set the input to the result of the output event:

<workorders-details (pushedWorkOrderKeyEvent)="setDetails($event)"  [myinput]="details"></workorders-details>

and in component.ts:

setDetails(details) {
   this.details = details;
}