Update multiple components with different data from one component

Question

I'm looking for ways to solve a problem in Angular 8.

Say I have three components, SearchFieldComponent, ResultFieldComponent1 and ResultFieldComponent2.

In SearchField component, I type something, click on a button and perform multiple GET requests. These GET requests are called request1 and request2.

How can I update ResultFieldComponent1 with the data of request1 and ResultFieldComponent2 with the data of request2? What kind of communication can I use for this?

I've been trying to treat all three components as siblings, but would it be better to have SearchFieldComponent be a parent to the other components?

Normally form is backed by some sort of data model - eg plain object. On request result update that object and you are done. — Antoniossss, Oct 14 '19 at 10:16
Communications between sibling components e.g.: https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication — standby954, Oct 14 '19 at 10:18

score 1 · Answer 1 · answered Oct 14 '19 at 10:20

Create a shared service and use subject to emit and subscribe something like

@Injectable()
export class SharedService{
$firstServiceResponseSource=new Subject();
$secondServiceResponseSource=new Subject();

firstServiceResponse=this.$firstServiceResponseSource.asObservable();
secondServiceResponse=this.$secondServiceResponseSource.asObservable();

sendFirstResponse(data){
this.$firstServiceResponseSource.next(data)
}

sendSecondResponse(data){
this.$secondServiceResponseSource.next(data)
}

}

then in your first and second component subscribe like

 ngOnInit(){
    this.sharedService.firstServiceResponse.subscribe(data=>{
    //here you will get the data
    })
     }
....//same thing in second component

and in your parent component emit it like

this.http.get('fistApi').subscribe((data)=>{
this.sharedService.sendFirstServiceResponse(data)
})

//same thing for second api response

score 0 · Answer 2 · answered Oct 14 '19 at 10:21

I believe SearchFieldComponent component should be treated as a parent component. Whenever we click on the button which fires 2 requests we should store them in 2 stream variables and pass them as input to the ResultFieldComponent2 and ResultFieldComponent1.

onClick() {
   this.results1$ = this.service.getDataForComponent1();
   this.results2$ = this.service.getDataForComponent2();
}

and in template

<div>
   <result-field-component1 data="results1$"></result-field-component1>
   <result-field-component1 data="results2$"></result-field-component1>
</div>

This way we can make the ResultFieldComponents dumb and Search Component as smart. Please refer smart vs dumb architecture

score 0 · Answer 3 · answered Oct 14 '19 at 10:44

SearchFieldComponent

    export class SearchFieldComponent {

      ResultFieldComponent1 : Subject<any> = new Subject();
      ResultFieldComponent2 : Subject<any> = new Subject();

     doApiCall {

      this.ResultFieldComponent1.next(response);
      this.ResultFieldComponent2.next(response);

    }

}

in the template

<div>
   <result-field-component1 [ResultFieldComponent1]="ResultFieldComponent1" ></result-field-component1>
   <result-field-component1 [ResultFieldComponent2]="ResultFieldComponent2"></result-field-component1>
</div>


export class ResultFieldComponent1 {
@Input() ResultFieldComponent1: Subject<any>;

 ngOnInt(){
   this.ResultFieldComponent1.subscribe(data=>{

   // do with your response.

})
}
}

Same for ResultFieldComponent2 component.

Update multiple components with different data from one component

3 Answers3