title: Angular2 - Transfer data outside router-outlet to another component
body: <p>Am new to Angular2 but I have already made 30+ component and services and used Input, Output, ChangeDetectorRef, Pipes. So pretty much know about Angular2 by now. My app.component.ts looks like this</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
      selector: 'soc',
      template: `
          &lt;header-block&gt;&lt;/header-block&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
  })
  export class AppComponent { }
  </code></pre>
  
  <p>As I need my header-block in every page so I added it outside router-block so I don't have to add it everywhere. Now the problem I am having is changing the value of variable in the header-block after doing an action in view inside router-outlet.</p>
  
  <p>For example I have menu which will be visible to the user only after they login.</p>
  
  <pre><code>{{ user_is_logged }}
  &lt;ul class="nav navbar-nav navbar-right" *ngIf="user_is_logged == '1'"&gt;
      &lt;li&gt;&lt;a href="#" (click)="logout($event)"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>user_is_logged</strong> is a variable whose value am getting from localStorage in <strong>header.block.component.ts</strong></p>
  
  <pre><code>user_is_logged:string = localStorage.getItem("logged");
  </code></pre>
  
  <p>When the user is not logged in i.e. user_is_logged is undefined for <strong>home.component.ts</strong> ( where login logic is written ), I ask the user to login and after successful login am updating the value of <strong>user_is_logged</strong> variable and also updating the localStorage value of the variable and then triggering detect changes by using the ChangeDetectionRef(cdr) and then routing to user profile</p>
  
  <pre><code>this.user_is_logged = "1";
  localStorage.setItem('logged', '1');
  this.cdr.detectChanges();
  this.router.navigate(['u/'+user_id']); //user_id is from login response from server
  </code></pre>
  
  <p>The problem is when I reach the user profile after successful login the value of {{ user_is_logged }} never updates even when am using the variable itself or using the value from localStorage or even calling for detection. </p>
  
  <p>Is it possible to do it this way or do I have to add header-block to every page separately? Please ask for more information if I missed something.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> ============></p>
  
  <p>So after going through Subject, BehaviourSubject, AsyncSubject, ReplaySubject, Observables and what not I just couldn't get this to work. This is the last code I have written :</p>
  
  <p><strong>home.page.component.ts</strong> (where login happens and has to emit the event)</p>
  
  <pre><code>import { HomeService } from '../services/home.service';
  // No observable or subject imported here.
  
  login() {
      // Sending status 1 to HomeService
      this.HomeService.changeStatus("1");
  }
  </code></pre>
  
  <p><strong>home.service.ts</strong> (which is imported by both component)</p>
  
  <pre><code>import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  // I imported Subject, BehaviourSubject, Observables but cant get it to work
  
  export class HomeService {
  
      // This looked more reliable than Subject so used this; init with value "0"
      public subjectStream = new BehaviorSubject&lt;string&gt;('0');
  
  
      constructor(
      ){
          this.subjectStream.subscribe(value =&gt; {
              // Successfully logs value "1" sent by changeStatus below
              console.log(value);
          });
      }
  
  
      changeStatus(value: any){
  
          // Gives value "1" when called by home.page.component.ts
          console.log(value);
  
          // Looks correct because it successfully sent value to construct
          this.subjectStream.next(value);
  
      }
  
  }
  </code></pre>
  
  <p><strong>header.block.component.ts</strong></p>
  
  <pre><code>import { HomeService } from '../services/home.service';
  // No observable or subject imported here also.
  
  
  constructor(
  ){
      this.HomeService.subjectStream.subscribe(value =&gt; {
          // Logs value "0" at beginning but never logs value "1"
          console.log(value);
      });
  }
  </code></pre>
  
  <p><strong>My Log</strong></p>
  
  <pre><code>// logged by constructor when imported by header.block.component
  home.service.ts:31                  0
  
  // logged by constructor of header.block.component itself
  header.block.component.ts:25        0
  
  // logged by constructor when imported by home.page.component (I think)
  home.service.ts:31                  0
  
  // ===================
  // Login called here
  // ===================
  
  // logged by changeStatus after login after called by home.component
  home.service.ts:36                  1 
  
  // logged by constructor after getting event from changeStatus
  home.service.ts:31                  1
  </code></pre>
  
  <p>What am I missing in header.block.component.ts? As the value is successfully updated within the home.service.ts but never goes to header.</p>