Component Communication with Input and Output in Angular 2

Component Communication with Input and Output

In Angular 1 we use $broadcast, $emit, $on to communicate between controllers. You can refer my previous blog if you want to know more on this.
We have same similar thing in Angular 2, But the coding is diffrent. Like say to flow data parent to child we will use @Input and @Output to flow data child to parent component. You can update input properties using property bindings [property]. And you can subscribe to output properties using event bindings (event).
You can use it in either "inputs" and "outputs" properties in the @Component decorator or in the Class. It's upto your own taste. We will go through both the way.

input to flow data parent to child

by using input property in @Component decorator

by using @Input decorator

output to flow data child to parent

by using output property in @Component decorator

by using @Output decorator

Download Code

Get the code @ my github