Angular Component to Component Value Passing - Practical

Two-way data passing.

1. Event Binding                -     required decorator @Output 
2. Property Binding           -     required decorator @Input

Event Binding

Here passes the data from the c component to the comp-to-comp-bind component. The c component calls its own function startGame(). 

HTML - c.component

Then fires the custom event of the c component. and passing the value from this component. @Output director mentioned that it is an output instance of this component.

Typescript - c.component.ts

 Now in the comp-to-comp-bind HTML file, It binds with the custom event.    Here getNumbersFromCcomponents($event) is its own function where it is passing value.

HTML - comp-to-comp-bind.component.html

Finally received to comp-to-comp-bind.components.ts file

Typescript - comp-to-comp-bind.component.ts

Property Binding

Here passing data from comp-to-comp-bind component to a and b component. Here are two array variables in comp-to-comp-bind.component.ts file. These two variable's values will pass to the a and b components.

                                        Typescript - comp-to-comp-bind.component.ts

Now in comp-to-comp-bind.component.html file, it parses the array into a number variable and passes value by property binding.

 

                                          HTML - comp-to-comp-bind.component.html

Finally, receive the value in the a components and show in a p tag of that template.

Same for the b component.