Angular 2 Observables and Change detection - How to get one component to retrieve a value, set by another component in a service?
<p>I think I'm overlooking something very fundamental, and I've been banging my head for a couple of days now. I'm new to Angular and reactive programming.</p>

<p>So, I have one service and two components.</p>

<p>In my <code>versionService.ts</code> I have a helper method which allows components to set a <code>currentVersion</code> in a <code>_dataStore</code>.</p>

<pre><code>private _dataStore: {
    currentVersion: any
};
currVersionStream$: Subject&lt;Version&gt;;

constructor(public http: Http) {
    this.currVersionStream$ = new BehaviorSubject&lt;Version&gt;(null);
    this._dataStore = {
        currentVersion: null
    };
}
public setCurrentVersion(v: Version): void {
    if (v != null) {
        this._dataStore.currentVersion = v;            
        this.currVersionStream$.next(this._dataStore.currentVersion);
    }
}
</code></pre>

<p>Then in my component <code>select-version.component.ts</code>, through a (click) event from the view/template, I use the <code>setCurrentVersion</code> helper method from the <code>VersionService.ts</code> to store the cliked on version.</p>

<p>In <code>select.version.template.html</code>:</p>

<pre><code>&lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
    &lt;li *ngFor="#v of availableVersions" (click)="selectedVersion(v)"&gt;
        &lt;a href="#"&gt;
            Version {{v.versionID}}
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;No version&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>In <code>version.component.ts</code>: Here I call on the method in the service.
<strong>Update</strong>: I inject versionService in both of my components.</p>

<pre><code>    import {VersionService} from '../../services/services';

@Component({
        selector: 'select-version',
        templateUrl: 'app/component/selectVersion/select-version.template.html',
        providers: [VersionService]
    })

export class SelectVersionComponent implements OnInit {

    constructor(public versionService: VersionService) {}

    public selectedVersion(v: Version) {
        console.log("SVC - set this version: " + v.versionID);
        this.versionService.setCurrentVersion(v);
    }
</code></pre>

<p>So, in my <strong>second</strong> component I want to retrieve the value set/stored in the service (<code>_dataStore</code>), and display it in its view/template (of my second component)</p>

<p>In my <code>second-component.template.html</code>:</p>

<pre><code>&lt;h2&gt;{{selectedVersion}}&lt;/h2&gt;
</code></pre>

<p>In my <code>second-component.ts</code>:
<strong>Update:</strong></p>

<pre><code>    import {VersionService} from '../../services/services';

@Component({
    selector: 'main-container',
    templateUrl: 'app/component/mainContainer/main-container.template.html',
    providers: [VersionService],
})

selectedVersion: any;

constructor(public versionService: VersionService) {
    this.versionService.currVersionStream$.subscribe((v) =&gt; {
        if(v != null) {
            this.selectedVersion = "Version" + v.versionID
        }
    }, error =&gt; console.error (error));
}
</code></pre>

<p><strong>Update:</strong>
In my main component, app.component.ts:</p>

<pre><code>import {SidebarComponent} from './component/sidebar/sidebar.component';
import {MainContainerComponent} from './component/mainContainer/main-container.component';


@Component({
    selector: 'init-app',
    templateUrl: 'app/app-component.template.html',
    directives: [SidebarComponent, MainContainerComponent],
})

export class AppComponent {
    constructor() {}
}
</code></pre>

<p>In my boot.ts:</p>

<pre><code>import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http'

bootstrap(AppComponent, [HTTP_PROVIDERS])
     .catch(err =&gt; console.error(err));
</code></pre>

<p>What am I missing to be able to view the <code>currentVersion</code> in my template of the second component, and will it update each time a new value is set?
Thanks for any reply!</p>