Parent to Child

Communication between Parent to Child is so easy in angular it can be achieved using  

@INPUT decorator /custom property.

@INPUT decorator tells the compiler that whatever value is coming from the parent component with the same name will initialise this property decorated with @Input() decorator.

 

Let’s get started with a simple example to get a clear idea of it.

 

 

We have to create two component at first

1) Parent Component <parent-component></parent-component>

2) Child Component <child-component></child-component>

 

Example Definition: In the parent component, we have a button and on that button click we want to assign value to the property of the child component.

 

Step 1: Create a button in the parent component.html file with its click event.

 

 

Step 2: Create 1 property and assign value to it in button’s click event in parent .ts file

 

 

Step 3: Add the child component to the parent component.

 

-Here CompanyName is the Custom Property

-And CompanyNameVal is the name of the property in the parent class itself, which is used to assign value to the Custom Property.

 

Step 4: In child component.ts

 

• Import Input from @angular/core

• Create a property decorated by @input decorator with the same name used as a custom property in the parent component

 

Step 5: Add a custom property in child component.html

 

 

Output when Button is not clicked:

 

 

 

Output when Button is clicked:

 

*******************

 

Child to Parent

 

Communication between Parent to Child is done by the @INPUT decorator. Similarly, Child to Parent is done by @OUTPUT decorator/ custom event.

@Output binds a property of the type of angular EventEmitter class. So for sending data from Child to parent we need to import 2 classes

1. Output 

2. EventEmitter

Let’s get started with a simple example to get a clear idea of it

Here also we need two component i.e 

1) Parent Component  <parent-component></parent-component>

2) Child Component <child-component></child-component>

 

Example Definition: In the child component, we have a button and on that button click we want to assign value to the property of the parent component. (just reverse of @input example)

 

Step 1: Create button in child component.html file with its click event.

 

 

Step 2: Create an output decorator with EventEmitter

 

 

Step 3: On button’s click emits the output decorator.

 

 

Step 4: In parent, component.html add a child component with a custom event.

 

Step5: In Parent, component.ts  add the custom event

 

Output when child component’s button is not clicked:

 

 

 

Output when child button is clicked:

 

 

Note: Always @Input or @Output decorator will be written on the child component.

 

For In Input decorator, the custom property is used and for output, a custom event is used.