Angular 7/8 Pass Data and Handle Events between Parent-Child Components using @Input and @Output Application Tutorial by Example

Angular help us create a robust and real-world application which may have complex architecture. To reduce code and make maintenance efficient, breaking application into multiple and independent working components is very important and basic practice.

Sometimes these modular components are placed in the application at different hierarchies such that any type of relation.

Implementation of data communication or event handling can occur in any direction:

From Parent to Child Component.
From Child to Parent Component.
Between Sibling Components of a Parent.

In this tutorial, we will discuss how to achieve data sharing and event handling techniques between components having above explained relations in Angular application using an example.

Here we will create a demo application where we have a parent component(DashboardComponent) having two child components AddeditpersonComponent and PersonlistComponent

Angular provides @Input and @Output decorators for data and even handling.

@Input decorator helps to pass data to a component using component property binding. The @Output decorator is used to Emit out data out of the component into the parent component using EventEmitter.

Check this working application demo on stackblitz