title: Using BehaviorSubject to share data between sibling components
body: <p>I am still learning Angular and trying to see how <code>BehaviorSubject</code> works but got stuck where to start. Here is waht I am trying to do:</p>
  <p>Create a search box component called <code>HeroDetailComponent</code> where I enter some text and based on this text I will search a list of heroes and show them to user using another component <code>HeroesComponent</code>. Now this communication should be done using a service component with help of <code>BehaviorSubject</code>.</p>
  <p>Here is my main component:</p>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;app-hero-detail&gt;&lt;/app-hero-detail&gt;
  &lt;app-heroes&gt;&lt;/app-heroes&gt;
  </code></pre>
  <p>Here is my <strong>hero-detail.component.html</strong> this i am using it as search box:</p>
  <pre><code>  &lt;div&gt;
      &lt;label&gt;name:
        &lt;input [(ngModel)]=&quot;hero.name&quot; placeholder=&quot;name&quot;/&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  </code></pre>
  <p>and the corresponding <strong>hero-detail.component.ts</strong></p>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Hero } from '../hero';
  
  @Component({
    selector: 'app-hero-detail',
    templateUrl: './hero-detail.component.html',
    styleUrls: ['./hero-detail.component.css']
  })
  export class HeroDetailComponent implements OnInit {
    
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  <p>This is my <strong>heroes.component.html</strong>, here I am displaying the search results:</p>
  <pre><code>&lt;h2&gt;My Heroes&lt;/h2&gt;
  
  &lt;ul class=&quot;heroes&quot;&gt;
    &lt;li *ngFor=&quot;let hero of heroes&quot;
      &lt;span class=&quot;badge&quot;&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>and its <strong>heroes.component.ts</strong> :</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Hero } from '../hero';
  import { HEROES } from '../mock-heroes';
  import { HeroService } from '../hero.service';
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })
  
  export class HeroesComponent implements OnInit {
  
    heroes = HEROES;
  
    constructor(private heroService: HeroService) { }
      
      getHeroes(): void {
        // Logic to access heroes list matching search text and display to user
      }
  
    ngOnInit() {
      this.getHeroes();
    }
  }
  </code></pre>
  <p>Here is my service component:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable({
    providedIn: 'root'
  })
  export class HeroService {
  
      private searchSource = new BehaviorSubject&lt;string&gt;(&quot;&quot;);
      searchText = this.searchSource.asObservable();
  
      constructor() { }
  
      searchByName(name: string) {
          this.searchSource.next(name);
      }
  
  }
  </code></pre>
  <p>This is my mock data of heroes list:</p>
  <pre><code>import { Hero } from './hero';
  
  export const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ];
  </code></pre>
  <p>Can you please help me how to have this should be implemented?</p>
  <p><strong>Updated:</strong></p>
  <p>I followed steps given in trichetriche answer, but I am getting below errors:</p>
  <pre><code>ERROR in src/app/hero-detail/hero-detail.component.ts(17,16): error TS2339: Property 'formValue$' does not exist on type 'HeroService'.
  src/app/hero-detail/hero-detail.component.ts(17,61): error TS2304: Cannot find name 'startWith'.
  src/app/heroes/heroes.component.ts(17,13): error TS2304: Cannot find name 'combineLatest'.
  src/app/heroes/heroes.component.ts(19,22): error TS2339: Property 'formValue$' does not exist on type 'HeroService'.
  src/app/heroes/heroes.component.ts(21,5): error TS2552: Cannot find name 'map'. Did you mean 'Map'?
  </code></pre>
  <p>How to solve these errors?</p>
  <p><strong>Update:</strong>
  The above errors are solved now. Now I started facing issue with observable:</p>
  <pre><code>Observable.js:54 TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
      at subscribeTo (subscribeTo.js:41)
      at subscribeToResult (subscribeToResult.js:11)
      at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber._complete (combineLatest.js:62)
      at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.complete (Subscriber.js:66)
      at Observable._subscribe (subscribeToArray.js:8)
      at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
      at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
      at CombineLatestOperator.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestOperator.call (combineLatest.js:32)
      at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
      at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
  </code></pre>
  <p>Can you please help me in solving this.</p>