title: Angular 4 pass data between 2 not related components
body: <p>I have a questions about passing data in Angular.</p>
  
  <p>First, I don't have a structure as <code>&lt;parent&gt;&lt;child [data]=parent.data&gt;&lt;/child&gt;&lt;/parent&gt;</code></p>
  
  <p>My structure is </p>
  
  <pre><code>&lt;container&gt;
    &lt;navbar&gt;
      &lt;summary&gt;&lt;/summary&gt;
      &lt;child-summary&gt;&lt;child-summary&gt;
    &lt;/navbar&gt;
    &lt;content&gt;&lt;/content&gt;
  &lt;/container&gt;
  </code></pre>
  
  <p>So, in <code>&lt;summary /&gt;</code> I have a select that do send value to <code>&lt;child-summary /&gt;</code> and <code>&lt;content /&gt;</code>.</p>
  
  <p>OnSelect method is well fired with (change) inside <code>&lt;summary /&gt;</code> component.</p>
  
  <p>So, I tried with <code>@Input</code>, <code>@Output</code> and <code>@EventEmitter</code> directives, but I don't see how retrieve the event as @Input of the component, unless to go on parent/child pattern. All examples I've founded has a relation between component.</p>
  
  <p>EDIT : Example with BehaviorSubject not working (all connected service to API works well, only observable is fired at start but not when select has value changed)</p>
  
  <p>shared service = company.service.ts (used to retrieve company data)</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  export class SrvCompany {
  
      private accountsNumber = new BehaviorSubject&lt;string[]&gt;([]);
      currentAccountsNumber = this.accountsNumber.asObservable();
  
      changeMessage(accountsNumber: string[]) {
          this.accountsNumber.next(accountsNumber);
      }
  
      private _companyUrl = 'api/tiers/';
  
      constructor(private http: Http) { }
  
      getSociete(): Promise&lt;Response&gt; {
          let url = this._companyUrl;
          return this.http.get(url).toPromise();
      }
  }
  </code></pre>
  
  <p>invoice.component.ts (the "child")</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  
  import { SrvInvoice } from './invoice.service';
  import { SrvCompany } from '../company/company.service';
  
  @Component({
      selector: 'invoice',
      templateUrl: 'tsScripts/invoice/invoice.html',
      providers: [SrvInvoice, SrvCompany]
  })
  
  export class InvoiceComponent implements OnInit  {
  
      invoice: any;
  
      constructor(private srvInvoice: SrvInvoice, private srvCompany: SrvCompany)
      {
  
      }
  
      ngOnInit(): void {
          //this.getInvoice("F001");
  
          // Invoice data is linked to accounts number from company.
          this.srvCompany.currentAccountsNumber.subscribe(accountsNumber =&gt; {
              console.log(accountsNumber);
              if (accountsNumber.length &gt; 0) {
                  this.srvInvoice.getInvoice(accountsNumber).then(data =&gt; this.invoice = data.json());
              }
          });
      }
  
      //getInvoice(id: any) {
      //    this.srvInvoice.getInvoice(id).then(data =&gt; this.invoice = data.json());
      //}
  }
  </code></pre>
  
  <p>company.component.ts (the trigerring "parent") </p>
  
  <pre><code>import { Component, Inject, OnInit, Input } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  
  import { SrvCompany } from './company.service';
  
  @Component({
      selector: 'company',
      templateUrl: 'tsScripts/company/company.html',
      providers: [SrvCompany]    
  })
  
  export class CompanyComponent implements OnInit {
  
      societes: any[];    
      soc: Response[]; // debug purpose
      selectedSociete: any;
  
      ville: any;
      ref: any;
      cp: any;
      accountNumber: any[];
  
      constructor(private srvSociete: SrvCompany)
      {
  
      }
  
      ngOnInit(): void {
          this.getSocietes();
      }
  
      getSocietes(): void {
  
          this.srvSociete.getSociete()
              .then(data =&gt; this.societes = data.json())
              .then(data =&gt; this.selectItem(this.societes[0].Id));
      }
  
      selectItem(value: any) {
          this.selectedSociete = this.societes.filter((item: any) =&gt; item.Id === value)[0];
          this.cp = this.selectedSociete.CodePostal;
          this.ville = this.selectedSociete.Ville;
          this.ref = this.selectedSociete.Id;
          this.accountNumber = this.selectedSociete.Accounts;
          console.log(this.accountNumber);
          this.srvSociete.changeMessage(this.accountNumber);
      }
  }
  </code></pre>