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.
![](https://lh5.googleusercontent.com/W4N8AYfbhkmeGqVGuYSGR36cNGw1e37r9AdVbLQgplSy-Fgkc8OhDTzsHUxHR8mVD4NurgYaQlS68RnzgoUcfQuflljUYS9XPXonAuUrEs-OO5_aAMCy-Ffs7hqs-yQIiC4PUoq_)
Step 2: Create 1 property and assign value to it in button’s click event in parent .ts file
![](https://lh4.googleusercontent.com/qK0EPBFGShbKKA7D5-yu3sED2eNob-31--czUrZ_PvvevMTUoPVJWmtopi3m-WBsBipad66-Up_fypAnoeyLUU3vqz4wGUSVhcxitr-qkly2JGa-tGmz4Dus_r_FLx0-mkwEh9fW)
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.
![](https://lh5.googleusercontent.com/w-9ShfdgeHNpS1aFYtmO8X2BwZpMhYNb5V6lTwXAnmwxUUfd4gbR6-U3J0qL_q-OshcQ1YJ8H0TtCX9NqZDtxk4VDDmcAF19JpLpb4MYPagdEU044xhlohFJMIqZiC_LfUby9ZUf)
Step 4: In child component.ts
![](https://lh5.googleusercontent.com/bUGlYG8DAmJsKYjehxiv0shs1EYBNdgt3coLsLJ9Yhe4nM7T14hTr3PHqDTnlDjy8TTYBGLuyvtAvuG69Q-NKjiFG3fSrkgPVsBi2V-shFpITY3YiBrV8d6oZ2w7oJNbkF1TMdoQ)
Step 5: Add a custom property in child component.html
![](https://lh6.googleusercontent.com/fRtFwGNebnJvcZSk88Wu0m41AnE1QPlFiQ7lfla9V_L_j0HQ_eonULSpde1-HbGkb7z2uyIpdeiVdo9p7XbNWXrm0dn93Ap76a06YHdDj3muNeYH0Lbj7r9u1qTPtGU3tOH1lc2k)
Output when Button is not clicked:
![](https://lh3.googleusercontent.com/okP6Z3ELHGclMqCYAa1lYmsdN2KoZZ-wW0Z0KcyjSmKofSKxLBP4t_XEy3TqdQB-OFFx8v49YXcdiL7uY3iKWXzgYcLkq40UsAwjM7k9AlaTAoGWSBhDnRaoHzsVaVZX7Khnt5Vi)
Output when Button is clicked:
![](https://lh4.googleusercontent.com/hc-wn1nOa6G-JAqyYxoPzZcm2RisucaxPAN71tE53YEFNd8rnTFe8OaqbdGpvvaAfNL1GAMFm7KhZ8LzDuORZa5VnsInPh34ALdPMxvlw6w_t8Gxv8xDG1D1I-RJsxtATaqm2xl6)
*******************
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.
![](https://lh6.googleusercontent.com/M3KRD8O3ts_meBZAKeXhTFsLZOLii-Ib0qndJf31fG4UN9ulQ69Mn0XU46wP3KkWd5ypX4uyTr7T_qK7TdssQ_TjyXqnCn9kU7Glvr-0i8AKbE7SpkbjOuxkVUCL9zVOw6xoqNPm)
Step 2: Create an output decorator with EventEmitter
![](https://lh4.googleusercontent.com/lVQ58apdwY7-Y9bKEo1PbfMZDSWNxmrmb6iZllusbW9BFIfZkDGZOmtVT9MmgrYEkZxq49aWsUB3Y6RqU3s0wb6CfF8b0N3stLVE8uzScoq2hxnyRDBp2plz_W9EYo7VLIe_gED6)
Step 3: On button’s click emits the output decorator.
![](https://lh5.googleusercontent.com/6I2qeo7LwN0BwKPNdxXbpW48Ehc1iJoS9FfgIOXFiYMdstLJMbGwPwKJ6a6V6ymgIVkc626cXBP1uZtlNOiw6kX77Gg15KMTD8aniDL9AztWaFZWlkvQlJVRb102z9g51RKDIAdo)
Step 4: In parent, component.html add a child component with a custom event.
Step5: In Parent, component.ts add the custom event
![](https://lh6.googleusercontent.com/Ad1BP9XkrVAIFG8omY1SSAyWPjc0suxbtYbfhImuEe_AYFZZXngxPcOnZtW2wOppeMDHkdDnoQWYBinBq-WkMTzdEKzvVc8YogIOnMT3MxaFr4Qg49A-egw5UFHEV0OTfHXTuuKl)
Output when child component’s button is not clicked:
![](https://lh5.googleusercontent.com/lXK_s2vfNKeZvaLvxjZ1p3gfOKTqQ2RwYmmw6TQXKsJ4ykXRXu5ntr5h7vYEFqZlWikTFNHt_epxlyS_Is_x4c7AAZQmxmS6bj7JtsEkfvJH-YAfMuSoHhXshDTQo5GNrgTtNaEs)
Output when child button is clicked:
![](https://lh5.googleusercontent.com/C7h-NjbYwr94SW6cuSr6b0r-zSAdi8MDFuNyeHuao_eZ_0Q5bbKyntYeXndxwq5oHVuF4r_WvAtxwmcBGCupZ9f1irN41mrBqBwStfWZVRiYVM0jJblf81sk03lHIs-jKlXCkTTs)
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.