Pass values between two Child Components — Angular

Data Communication between two Child Components within a Parent Module.

There are many use cases when we need to refresh a child component based on the selection of a value from another child component within a parent module.

Let me take the opportunity to explain this use case via a few code snippets.

I shall be taking into consideration Angular 10 as the framework for this scenario.

Few steps to understand the concept.

1. A parent module has 4 child components.
2. Consider that, on the selection of a radio button of child component ‘A’, we need to refresh child component ‘B’ so as to reflect values based on the selection from component ‘A’.
3. Let’s start with some code snippets to understand the flow.

Navigate to <parent-module-name>.component.html file. Somewhere you should have given a call to the child component as below which has selector name “app-child-component-a”.

1. Add (selectedPlanEvent) to the Html tag and a method to support it, which in this case is “onPlanSelection”
2. Add a hash id by name “#subscriptionDetails” to “app-child-component-b”

<app-child-component-a (selectedPlanEvent)="onPlanSelection($event)"></app-child-component-a>
<app-child-component-b #subscritionDetails></app-child-component-b>

Open component.ts file of child-component-a and just after export class, add and @output directive that shall help us to pass value from one component to another.

Basically, the requirement here is to emit the value that was been selected from the radio button to be available further to the next child component. The best practice is to mention @Input/@Output directives just after the export class method.

Line 1 = export class ChildComponentA implements OnInit, OnDestroy {
Line 2 = @Output() selectedPlanEvent = new EventEmitter<string>();

Further, we should be having a method been called on click of Radio button in Child-Component-A, as below

<input id="{{ plan.id }}" type="radio" name="radio"[checked]="plan.isChecked" (click)="displayPlanDetails(plan)"/>

Again, moving back to the same component.ts file of child-component-a, we need to add a method to support click event as below. Please look out for “selectedPlanEvent” that was been mentioned as part of @Output directive in the few steps above. So in line 2, we emit the selected value when we clicked the radio button.

displayPlanDetails(plan: SomeModelClass): void{
line 1- this.selectedPlanId = plan.someValueToBeUsed;
line 2- this.selectedPlanEvent.emit(this.selectedPlanId);
}

As we know that data propagation happens from Parent to Child, so now we shall be moving to <parent-module>.component.ts file to work on the most important part of the exercise. We need to call the API method of Child-Component-B so as to refresh the component from the parent module. Please follow the below steps

Need to import Child-Component-B into the <parent-module>.component.ts file

1. The @ViewChild decorator should be the first line in the export class method so as to reference the child component.
2. Provide an implementation to onPlanSelection method (highlighted in BOLD) where-in we call the method of Child-Component-B and this refreshes the second child component without refreshing the whole page.

export class ParentModuleComponent implements OnInit, OnDestroy {
@ViewChild('subscritionDetails') childComponentBComponent: ChildComponentB-Component;
onPlanSelection(planId: string): void{this.childComponentBComponent.SomeMethod(planId);}