There many kinds of component  Interaction, the most used Interaction's are

• Parent to child
• Child to parent
• Sibling to sibling
• With a service

Passing Data from Parent to Child [ INPUT ]

In parent.component.html

<div class=”parent-coponent”>

<h3>Hello I am Parent Component</h3>

<app-child [childPosts]=’parentPosts’></app-child> 

// here parentPost is from parent.component.ts

</div>

Parent.component.ts

parentPosts:any[]=[];

post=’ ‘;

addPost(post){

this.parentPosts.push(post);

}

Child Component

In the child component, use input to receive data from the parent component.

After importing the input we need to decorate the input.

child.component.ts

Import { input } from ‘@angular/core’;

@input() childPosts: any[]=[];

Child.component.html

<div class=”child” *ngFor=”post of childPosts”> 

{{post}}

</div>

---------------------------------------------------------------------

Passing Data from Child to Parent

[ OUTPUT ] EventEmitter

Here must import EventEmitter, Output

Child.component.html

 <button (click)='passEvent()'>Click Me !</button>

Child.component.ts

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

 @Output() passedEvent = new EventEmitter();

 passEvent(){

    this.name = 'Mr. Maruf Al Bashir';

    this.passedEvent.emit();

  }

Passing Data Between Sibling

Coming soon.................

Passing Data with Service

Coming soon .......