Communication between component using @Input and @Output in angular 4

reactive form

Component communication in angular 4 can be done using @Input and @Output decorator.
If you are new to angular 4 then go through the given link How to start with angular 4.

@Input() : @Input decorator binds a property within one component (child component) to receive a value from another component (parent component). This is one-way communication from parent to child. The component property should be annotated with the @Input decorator to act as input property. A component can receive a value from another component using component property binding. Now we will see how to use @Input. It can be annotated at any type of property such as number, string, array or user-defined class. To use an alias for the binding property name we need to assign an alias name as @Input(alias).
Find the use of @Input with Array of numbers.

@Output(): @Output decorator binds a property of a component to send data from one component (child component) to calling component (parent component). This is one way communication from child to parent component. @Output binds a property of the type of angular EventEmitter class. This property name becomes custom event name for calling component. @Output decorator can also alias the property name as @Output(alias) and now this alias name will be used in custom event binding in calling component.
Find the @Output decorator.

Example: Suppose if I have to pass data from parent component to child component and have to perform some operation on that data and after some event on child component again you have to pass some data from child to parent component than in that case you need to use @Input and @Output decorator to handle this situation.

Child component

Parent component
Please follow and like us:

You May Also Like

About the Author: Sujeet Kumar

Sujeet is Web and Android Devloper with a soft spot for functional programming. I like to play cricket, regular workout.

Leave a Reply

Your email address will not be published. Required fields are marked *