How to Communicate between Components in Angular 11 ? .
Communicating between components is one of the most important topic in Angular . If you understand the process of communication between two components , we can easily build angular applications . Communication can be divided in to 3 types as follows
- Communication from Parent Component to Child Component
- Communication from Child Component to Parent Component
- Communication Between two isolated components or Sibling component .
In this article lets us find out How to Communicate between Components in Angular 11. This on of the steps to learn Angular . In my previous posts i have given detailed step by step procedure to become Angular Developer in 23 Steps to Become Angular 7 Developer
Create two components
ng g c parent
ng g c child
Communicating From Parent to Child
Step 1: Create a variable with @Input Decorator
Step 2: Go to Parent.component.html and place the variable with  .
Step 3: Use variable declared in child.component.ts in child.component.html
Communicating from Child to Parent
Step 1: Declare a variable in child.component.ts and decorate with @Output and EventEmitter
Step 2: When a event triggers from child component , call the above variable with emit method and send the Data through it.
Step 3: Go to Parent.component.html and use the variable which declared in child.component.ts
Step 4: Create a function receiveValues in parent Component and receive the Values from Child.
the received values can be assigned to a variable which can be used in Parent Component
Communicating between Siblings
Create two compoents called sibling1 and sibling2 . To Communicate between two isolates components , we need to have a common service . So lets create a service called commonservice.service.ts
Step 1: Create a common serve with a method called exchangeData and a variable called sendInfo
Step 2: The variable which is declared in common service , should be assigned to Subject
Example : sendInfo = new Subject()
What is Subject in Angular , Why to use it .?
It is a class from rxjs library , which can take the input and can send across , to receive the data from Subject instance we need to subscribe for it ?
Step 3 : Create a button in sibling1.component.html and assign a event handler ” sedDataToSib2 ” . From sibling 1, when you click on button Trgger the method ” sedDataToSib2 ” which is in sbiling1.component.html .
Step 4 : In commonservice method which triggered from Comp 1 , call a next method to send the Data to comp2
Step 5 : Subscribe to the variable sendInfo which configured with new Subject in Commonservice .
Step 6 : When Data triggered from Comp1 it will triggered the method sendInfo in commonservice and the data will be avalilable in Comp2
If you are looking for more info How to Communicate between Components in Angular 8 , please comment or drop a mail . And you are also requested to let me know , is this article helpful to you or not .
Who am I ? . I am a fullstack developer with 10+ years of experience , i own an institute called Sunline IT Solutions at marathahalli . I have trained 100’s students to get Job as front end developer and full stack developer . If anybody interested to get trained as Front end developer or full stack developer , please contact me . Find more similar articles here