angular - Angular2 calling a function in a sibling component -

component a

i have form button should call service class. service returns extracted json result.

compare() {     this.getresults(); }  getresults() {     this.resultservice.getresults()         .subscribe(             results => this.results = results,             error =>  this.errormessage = <any>error); } 

template of a:

<form (ngsubmit)="compare()" #compareform="ngform">     <div class="col-md-5">         <h1>disk forensics</h1>          <div class="form-group">             <label for="resourcea">disk a</label>             <select ngbdropdown class="form-control" id="resourcea" required [(ngmodel)]="resourcea" name="resourcea">                 <option *ngfor="let r of disks" [value]="r.id">{{r.name}}</option>             </select>         </div>         <div class="form-group">             <label for="resourceb">disk b</label>             <select class="form-control" id="resourceb" required [(ngmodel)]="resourceb" name="resourceb">                 <option *ngfor="let r of disks" [value]="r.id">{{r.name}}</option>             </select>         </div>          <button type="button" (click)="compare()">compare</button>          <div class="error" *ngif="errormessage">{{errormessage}}</div>     </div>      <h4>mode</h4>     <div class="radio">         <label>             <input type="radio" name="diffmode" id="diffmode1" value="diffmode1" checked>             different         </label>     </div>     <div class="radio">         <label>             <input type="radio" name="diffmode" id="diffmode2" value="diffmode2">             identical         </label>     </div>     <div class="radio">         <label>             <input type="radio" name="diffmode" id="diffmode3" value="diffmode3">             left         </label>     </div>     <div class="radio">         <label>             <input type="radio" name="diffmode" id="diffmode4" value="diffmode4">             right         </label>     </div> </form> 

service class

public getresults(): observable<result[]> {     let body = json.stringify('{}');      var options:requestoptionsargs = {       body: "{}"     }      return this.results = this.http.get(this.url, options)                     .map(this.extractdata)                     .catch(this.handleerror);   } 

component b

is display results service

result.component.html:

<div class="col-md-12">     <h1>results:</h1>     <div>         <p *ngfor="let r of results; let i=index">             {{i + 1}}: {{r}}         </p>     </div>     <div class="error" *ngif="errormessage">{{errormessage}}</div> </div> 

result.component.ts:

import {component, oninit, input} '@angular/core'; import { result } "../models/result"; import {resultservice} "../services/result.service";  @component({     selector: 'diff-result',     templateurl: './diff-result.component.html',     styleurls: ['./diff-result.component.css'],     providers: [resultservice] }) export class diffresultcomponent implements oninit {       errormessage: string;      constructor(private resultservice: resultservice) { }      ngoninit() {         this.getresults()     }      getresults() {         this.resultservice.getresults()             .subscribe(                 results => this.results = results,                 error =>  this.errormessage = <any>error);     } } 

what i'd trigger compare()-function service being called , result.html updated results.

since sibling component, assuming can't use viewchild-attributes.

many help

you can use public subject in service.

component trigger comparison , component b consume result.

take @ plunker: https://plnkr.co/edit/5vny5d4rfudq06qrjaor?p=preview

import {component, ngmodule, injectable} '@angular/core' import {browsermodule} '@angular/platform-browser'  import {subject} 'rxjs/rx';  @injectable() export class myservice {   public resultssubject = new subject<string>();   public getresults() {    this.resultssubject.next('data...');  }  }  @component({   selector: 'my-cmpa',   template: `     <div>       <h3>component a</h3>       <button (click)="_srvc.getresults()">trigger service!</button>     </div>   `, }) export class acomp {   constructor(private _srvc: myservice) { } }  @component({   selector: 'my-cmpb',   template: `     <div>       <h3>component b</h3>       <p>         {{_results}}       </p>     </div>   `, }) export class bcomp {    _results = '';    constructor(private _srvc: myservice) {     this._srvc.resultssubject.subscribe(       res => this._results = res,       err => console.log(err)     );   } }  @component({   selector: 'my-app',   template: `     <div>       <h2>hello {{name}}</h2>     </div>     <my-cmpa></my-cmpa>     <my-cmpb></my-cmpb>   `, }) export class app {   name:string;   constructor() {     this.name = 'angular2'   } }  @ngmodule({   imports: [ browsermodule ],   declarations: [ app, acomp, bcomp ],   providers: [myservice],   bootstrap: [ app ] }) export class appmodule {}