Angular Component to Component Value Passing Flow.

Typically we are not allowed to use any behavior from one component to another component's. But following two ways, we can easily use data from one component to another component's.

• Event Binding               -     required decorator @Output
• Property Binding          -     required decorator @Input

Event Binding

Here is the common flow of an event binding. Here we took two components as examples. The parent component passes a value to the child component. 

Parent Component: The HTML of the parent component calls a function pFn(10) and passes value 10 as an argument. In Type Script assign a custom event that fires inside of pFn() function. The event passes the number type value that the value gets when it is firing inside pFN() function.

must add @Output decorator before the event name.

Child Component: Add the parent template inside the HTML of the child component. And fire the custom event of the parent component. Call the own function cFn($event) of the child component and get and pass the value to the type script of the child component.

Summary - One component cannot use directly an behavior of another component. But it can fire custom events of other components. 😀 

Property Binding

Property binding is easy. Same parent passing value 10 to child component. So inside HTML of parent, added child template and passes value. Here parentNum is the variable of the parent component and [childNum] is the input variable of the child component.

must add @Input before the input variable.

See with practical code >>