title: Component interaction via service Angular 2
body: <p>I'm trying to do this <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service</a></p>
  
  <p><em>interaction.service.ts</em>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs/Subject';    
  import { Options } from './options';
  
  @Injectable()
  export class InteractionService {
      private optionsSource = new Subject&lt;Options&gt;();
  
      options$ = this.optionsSource.asObservable();
  
      setOptions(options: Options) {
          this.optionsSource.next(options);
      }
  }
  </code></pre>
  
  <p><em>app.component.ts</em>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CoreService } from './core/core.service';
  import { InteractionService } from './providers/interaction.service';
  import { Options } from './options';
  
  @Component({
      selector: 'app',
      templateUrl: './app/app.component.html'
  })
  export class AppComponent implements OnInit {
      constructor(private coreService: CoreService,
          private interactionService: InteractionService) { }
  
      ngOnInit() {
            this.coreService.getOptions().subscribe((options: Options) =&gt; { 
                this.interactionService.setOptions(options);
              });
          }
      }
  </code></pre>
  
  <p><em>sidebar.component.ts</em>:</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  import { InteractionService } from './../../providers/interaction.service';
  import { Options } from './options';
  
  @Component({
      selector: 'app-sidebar',
      templateUrl: './app/core/sidebar/sidebar.component.html'
  })
  export class SidebarComponent implements OnInit {
      options: Options;
  
      constructor(private interactionService: InteractionService) {
          this.interactionService.options$.subscribe(
              (options: options) =&gt; {
                  this.options = options;
              });
      }
  
      ngOnInit() {
          if (this.options.mode === "test") {
              //...
          } else {
              //...
          }
      }
  }
  </code></pre>
  
  <p><em>app.component.html</em>:</p>
  
  <pre><code>&lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And declare "<code>providers: [InteractionService]</code>" in <em>app.module.ts</em>.</p>
  
  <p>But in <em>sidebar.component.ts</em> I have error "<strong>Cannot read property 'mode' of undefined</strong>".</p>
  
  <p>What do I do wrong? How can I resolve that?</p>