title: Angular 2 Component Interaction via a service
body: <p>I have two parallel directives (as apposed to parent-child) and I want them to communicate via a service using observable if possible. I've read the <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="nofollow noreferrer">official component interaction guidline</a>, but it talks about parent-child interaction. I tried to make a <a href="http://plnkr.co/edit/CxrEwkrJgXETq5lBX6Of?p=preview" rel="nofollow noreferrer">plunker</a> with two directives but it doesn't work. </p>
  
  <p>Basically, what I want is to create a service:</p>
  
  <pre><code>export class DirService {
     contentSource = new Subject();
     content$ = this.contentSource.asObservable();
  }
  </code></pre>
  
  <p>And then, use this service to make a bridge between &lt; dir1 > and &lt; dir2 >. Could someone point out how to implement this senerio? </p>
  
  <p>Btw, I choose to use observable mainly because:</p>
  
  <ul>
  <li>I read the <a href="https://stackoverflow.com/questions/33380696/unable-to-figure-out-correct-eventemitter-or-observable-syntax-in-angular2-servi#comment54684990_33382275">post</a> in <a href="https://stackoverflow.com/questions/33380696/unable-to-figure-out-correct-eventemitter-or-observable-syntax-in-angular2-servi">this thread</a>.</li>
  <li>If I want many directives to communicate, I guess observable could make the logic more clear.</li>
  </ul>
  
  <p>Thanks!</p>