Cross component communication with angular 2+ (any child to any parent)

Question

I have been working on web application in Angular 2+. and i have following situation

component A
  |
  component B
    |
    component C
      |
      component D   //click on button -> call apis and return value to component A's variable

In component D there is button if user click on that we need to call rest API and that API's result should be show in component A.

Business case : Consider that component A is your top header which contain point count and form component D user do some task and based on that task i need to increment that points.

I can achieve this functionality with broadcast service in angular Subject<BroadcastEvent> (after api return value create broadcast and in component A i am listing that event ) but i am not sure that if there is a better way to do this stuff. Or i can't use same service in both component because I need to assign value in variable as well as in show in DOM. If i need only DOM element to be updated than service can resolve my problem but i also need in components variable.

Does this answer your question? [How do I share data between components in Angular 2?](https://stackoverflow.com/questions/31026886/how-do-i-share-data-between-components-in-angular-2) — Harun Yilmaz, Feb 14 '20 at 06:40
https://angular.io/guide/component-interaction#parent-calls-an-viewchild Check that. I think it's useful for your requirements. — Jai Kumaresh, Feb 14 '20 at 07:07

WorksLikeACharm · Answer 1 · 2020-02-14T07:02:13.810

1

In my experience it makes sense to make a service keep the number of points. That service is then injected into component D to call service.addPoints(). That service is also injected into component A to call service.getPoints().

componentA.component.ts:

export class componentA  {

constructor(public myService: MyService){}

}

componentA.component.html:

{{myService.getPoints()}}

componentD.component.ts:

export class componentD  {

constructor(public myService: MyService){}

}

componentD.component.html:

<button (click)="{{myService.addPoints()"></button>

myService.ts:

@Injectable()
export class MyService {
public points: number;

public getPoints(){
  return this.points;
}

public addPoints(){
  this.points = this.points +1;
}
}

edited Feb 14 '20 at 07:02

answered Feb 14 '20 at 06:38

WorksLikeACharm

384
1
6
14

thanks for your answer. but in that case how component A's will know that service.getPoints() method when to call ? – Meet Patel Feb 14 '20 at 06:43
Put it in the template of component A. You will see angular makes sure the current points are displayed. – WorksLikeACharm Feb 14 '20 at 06:45
agreed with two way binding DOM element will update but how about componet A variable ? it will not reflect new value. – Meet Patel Feb 14 '20 at 06:52
I see we are talking about 2 differnt things, I´ll add code. :) – WorksLikeACharm Feb 14 '20 at 06:56
{{myService.getPoints()}} in component A make sense.But i have another scenario i need to call function in component A after addPoints() from is called.is it possible ? – Meet Patel Feb 14 '20 at 08:20
Yes it´s possible. Every function in myService is available in the components where you injected myService. – WorksLikeACharm Feb 14 '20 at 09:07

score 1 · Answer 2 · edited Mar 07 '20 at 13:27

if you call your api in a method of ComponentB you can use

@viewchild(ComponentA)ComponentA:ComponentA

in your ComponentB and Assignment result api from ComponentB to variable or array of ComponentA. for example You define a array in ComponentA and:

ComponentA

export class componentA { 
    points = [];
}

ComponentB

import { HttpClient } from '@angular/common/http';
import { ComponentA } from '{{ComponentA_PATH}}/ComponentA';

export class ComponentB { 
    @viewchild(ComponentA) componentARef: ComponentA;

    constructor(private httpClient: HttpClient)

    GetPoints() {
    this.httpClient.get(your url).subscribe(
      result=>{
        componentARef.points.push(result);
              }
               }
}

but this way is not bestway you should create a sevice and pass data bettween components like the above answer but this is also a way i hope i have been able to help.

Cross component communication with angular 2+ (any child to any parent)

2 Answers2